Ariakit
/

All things Form

Components

FormSubmit information with accessible interactive controls in React. Take advantage of the browser's built-in validation with screen reader support. This component is based on the WAI-ARIA Form Role.

Examples

FormRadioUsing the FormRadioGroup and FormRadio components to create a Form with custom validation that requires a user to select an option from a list of radio buttons.
Form with SelectCombining Form and Select to create an accessible custom select widget that works with the browser's built-in validation and native form submission.

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.