All things Form
Components
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 to control the state of
Form components.
FormRenders a form element and provides a form
store to its controls.
FormCheckboxRenders a checkbox input as a form control, representing a boolean, string,
number, or array value.
FormControlAbstract component that renders a form control. 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.
FormDescriptionRenders a description element for a form field, which will automatically
receive an aria-describedby attribute pointing to this element.
FormErrorRenders an element that shows an error message. The children will
automatically display the error message defined in the store.
FormFieldDeprecated:
This component has been renamed to
FormControl. The API remains
the same.
FormGroupRenders a group element for form controls. The
FormGroupLabel component
can be used inside this component so the aria-labelledby prop is properly
set on the group element.
FormGroupLabelRenders a label in a form group. This component must be wrapped with the
FormGroup or
FormRadioGroup components
so the aria-labelledby prop is properly set on the form group element.
FormInputRenders a form input. Unlike
FormControl, this component
passes the value and onChange props down to the underlying element that
can be native input, select or textarea elements.
FormLabelRenders a label associated with a form field, even if the field is 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 as a form control. This component must be wrapped in a
FormRadioGroup along with
other radio buttons sharing the same
name.
FormRadioGroupRenders a group element for
FormRadio elements. The
FormGroupLabel component
can be used inside this component so the aria-labelledby prop is properly
set on the group element.
FormRemoveRenders a button that will remove an item from an array field in the form
when clicked.
FormResetRenders a button that resets the form to its initial values, as defined by
the
defaultValues
prop given to the form store.
FormSubmitRenders a native submit button inside a form. The button will be
disabled while the
form is submitting, but it will remain accessible to keyboard and screen
reader users thanks to the
accessibleWhenDisabled
prop that's enabled by default.