Ariakit
/

All things Form

Components

Examples

API Reference

useFormContextReturns the form store from the nearest form container.
useFormStoreCreates a form store.
FormRenders a form element.
FormCheckboxRenders a checkbox as a form field.
FormDescriptionRenders a description element for a form field.
FormErrorRenders an element that displays an error message. The children will be automatically set to the error message set on the store.
FormFieldRenders a form field. Unlike FormInput, this component doesn't automatically pass the value and onChange props down to the underlying element. This is so we can use it not only for native form elements but also for custom components whose value is not controlled by the native value and onChange props.
FormGroupRenders a form group.
FormGroupLabelRenders a label in a form group. This component must be wrapped with FormGroup so the aria-labelledby prop is properly set on the form group element.
FormInputRenders a form input. Unlike FormField, this component passes the value and onChange props down to the underlying element that can be a native input, select or textarea elements.
FormLabelRenders a label for a form field. If the field is not a native input, select or textarea element, the component will render a span element. Instead of relying on the htmlFor prop, it'll rely on the aria-labelledby attribute on the form field. Clicking on the label will move focus to the field even if it's not a native input.
FormProviderProvides a form store to Form components.
FormPushRenders a button that will push items to an array value in the form store when clicked.
FormRadioRenders a radio button in a form.
FormRadioGroupRenders a radio group in a form.
FormRemoveRenders a button that will remove an item from an array field in the form when clicked.
FormResetRenders a reset buttom in a form.
FormSubmitRenders a submit buttom in a form.