Components / Form

Form

React-hook-form bindings for validated forms: settings panes, dialogs, anything with rules and error messages. The Field family handles layout; Form wires state, ids, and aria attributes.

import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage, useFormField } from '@layers/ui/form'

Rendered stock

House rules

• FormField wraps a react-hook-form Controller; FormItem, FormLabel, FormControl, FormDescription, and FormMessage wire ids and aria-describedby/aria-invalid automatically.
• FormControl merges its props onto the single child control via a render-prop idiom (Base UI useRender); there is no asChild.
• The <form> element stays bare: FieldSet owns field spacing, the container owns padding. The submit button lives outside the form as a sibling, linked via form={id}, so gap-based containers keep their spacing.
• Mutations get an explicit Save button with a spinner; never an optimistic save.

See also

• Field (form layout family)