Form
A composable form component with field validation, labels, and actions for building accessible forms
Installation
Install the Form component component using the nocta-ui CLI:
npx @nocta-ui/cli add formImport the component:
import {
Form,
FormField,
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormActions,
FormInput,
FormSubmit,
} from '@/components/ui/form';Examples
Default Form
Error Handling
Handle validation in two ways:
- Pass an
errorprop toFormFieldand place<FormMessage />to display it. - Or use an Ariakit form store with
validate/setErrorand place<FormMessage type="error" />to read errors from the store.
Api Reference
Form
Prop
Type
FormField
Prop
Type
FormLabel
Prop
Type
FormMessage
Prop
Type
FormActions
Prop
Type
FormInput
Prop
Type
FormSubmit
Prop
Type