Ariakit
/

FormProvider

Provides a form store to Form components.

Code examples

<FormProvider defaultValues={{ email: "" }}>
<Form>
<FormInput />
</Form>

Optional Props


defaultErrors

DeepPartial<DeepMap<T, ErrorMessage>> | undefined

The default errors of the form.


defaultItems

T[] | undefined = []

The defaut value for the items state.


defaultTouched

DeepPartial<DeepMap<T, boolean>> | undefined

The default touched state of the form.


defaultValues

T | undefined = {}

The default values of the form.


errors

DeepPartial<DeepMap<T, ErrorMessage>>

Form errors.


items

T[]

Lists all items along with their metadata. This state is automatically updated when an item is registered or unregistered using the registerItem function.


setErrors

((errors: DeepPartial<DeepMap<T, ErrorMessage>>) => void) | undefined

Function that will be called when the errors state changes.

Code examples

useFormStore({ setErrors: (errors) => console.log(errors) });

setItems

BivariantCallback<(items: T[]) => void> | undefined

A callback that gets called when the items state changes.

Code examples

const [items, setItems] = useState([]);
const collection = useCollectionStore({ items, setItems });

setTouched

((touched: DeepPartial<DeepMap<T, boolean>>) => void) | undefined

Function that will be called when the touched state changes.

Code examples

useFormStore({ setTouched: (touched) => console.log(touched) });

setValues

((values: T) => void) | undefined

Function that will be called when values state changes.

Code examples

function MyForm({ values, onChange }) {
const form = useFormStore({ values, setValues: onChange });
}

store

Store<Partial<S>> | undefined

Another store object that will be kept in sync with the original store.

Live examples


touched

DeepPartial<DeepMap<T, boolean>>

The touched state of the form.


values

T = {}

Form values.

Live examples

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on API Reference.

Read latest issue

No Spam. Unsubscribe at any time.