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.
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.