group | package | title | order | slug | description | import | docs | source | license |
---|---|---|---|---|---|---|---|---|---|
mantine-form |
@mantine/form |
use-form |
0 |
/form/use-form/ |
Manage form state |
import { useForm } from '@mantine/form'; |
form/use-form.mdx |
mantine-form/src |
MIT |
import { FormDemos } from '@mantine/demos';
@mantine/form
package does not depend on any other libraries, you can use it with or without @mantine/core
inputs:
Install with npm:
npm install @mantine/form
Install with yarn:
yarn add @mantine/form
useForm
hook accepts a single argument with a configuration object that includes the following properties (all of them are optional):
initialValues
– initial form values, form types are generated based on this valueinitialErrors
– initial form errors, object of React nodesinitialTouched
– initial touched stateinitialDirty
– initial dirty statevalidate
– an object with validation rules, schema or a validation function that receives form values as an argument and returns object with validation errorsclearInputErrorOnChange
– boolean value that determines whether input error should be clear when its value changes, true by default
Hook returns an object with the following properties:
values
– current form valuessetValues
– handler to set all form valuessetFieldValue
– handler to set value of the specified form fielderrors
– current validation errorssetErrors
– sets validation errorsclearErrors
– clears all validation errorsclearFieldError
– clears validation error of the specified fieldsetFieldError
– sets validation error of the specified fieldremoveListItem
– removes list item at given field and indexinsertListItem
– inserts list item at given indexreorderListItem
– reorders list item with given position at specified fieldvalidate
– validates all fields, returns validation resultsvalidateField
– validates specified field, returns validation resultsonSubmit
– wrapper function for formonSubmit
event handleronReset
– wrapper function for formonReset
event handlerreset
– resetsvalues
to initial state, clears all validation errorsisTouched
– returns boolean value that indicates that user focused or modified fieldisDirty
– returns boolean value that indicates that field value is not the same as specified ininitialValues
setDirty
– sets fields dirty statesetTouched
– sets fields touched stateresetDirty
– clears dirty stateresetTouched
– clears touched stategetInputProps
– returns an object with value, onChange and error that should be spread on input
UseFormReturnType
can be used when you want to pass form
as a prop to another component:
import { TextInput } from '@mantine/core';
import { useForm, UseFormReturnType } from '@mantine/form';
interface FormValues {
name: string;
occupation: string;
}
function NameInput({ form }: { form: UseFormReturnType<FormValues> }) {
return <TextInput {...form.getInputProps('name')} />;
}
function OccupationInput({ form }: { form: UseFormReturnType<FormValues> }) {
return <TextInput {...form.getInputProps('occupation')} />;
}
function Demo() {
const form = useForm<FormValues>({ initialValues: { name: '', occupation: '' } });
return (
<>
<NameInput form={form} />
<OccupationInput form={form} />
</>
);
}