Ariakit
/

Form

Renders a form element and provides a form store to its controls.

The form is automatically validated on change and on blur. This behavior can be disabled with the validateOnChange and validateOnBlur props.

When the form is submitted with errors, the first invalid field is automatically focused thanks to the autoFocusOnSubmit prop. If it's successful, the resetOnSubmit prop ensures the form is reset to its initial values as defined by the defaultValues option on the store.

Code examples

const form = useFormStore({
defaultValues: { username: "johndoe" },
});
<Form store={form}>
<FormLabel name={form.names.username}>Username</FormLabel>
<FormInput name={form.names.username} />
</Form>

Optional Props


autoFocusOnSubmit

boolean | undefined = true

Determines if the form should automatically focus on the first invalid field when the form is submitted.


render

RenderProp<React.HTMLAttributes<any> & React.RefAttributes<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined

Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.

Check out the Composition guide for more details.


resetOnSubmit

boolean | undefined = true

Determines if the form state should be reset to its defaultValues upon successful form submission.


resetOnUnmount

boolean | undefined = false

Determines if the form state should reset to its defaultValues when the Form component is unmounted.


store

FormStore<FormStoreValues> | undefined

Object returned by the useFormStore hook. If not provided, the closest FormProvider component's context will be used.


validateOnBlur

boolean | undefined = true

Determines if the form should invoke the validation callbacks registered with useValidate when a field loses focus.


validateOnChange

boolean | undefined = true

Determines if the form should invoke the validation callbacks registered with useValidate when the values change.

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.