Form

Import

This binding lives behind its own entry, @comitor/ui/form, and is not re-exported from the main barrel. The reason is not bundle size: react-hook-form keeps a singleton React context, so if your app and the package resolve two different copies, useFormContext() reads the wrong provider and returns undefined. Keeping it behind a separate door makes RHF an optional peer that apps without forms never have to install.

// The react-hook-form binding lives behind its own entry.
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  useFormField,
} from '@comitor/ui/form'

// Everything you put *inside* a field still comes from the main entry.
import { Button, Input, Textarea } from '@comitor/ui'

Basic usage

Spread the useForm() result onto Form, then drive each input through a FormField render prop.

Validation

Pass rules to a field and submit empty — FormMessage surfaces the error and the control flips to its invalid state.

Reading field state

useFormField is exported so your own components can read the same ids and validation state the built-in parts use — character counters, inline hints, custom error affordances. Call it from anything rendered inside a FormField; the demo runs in mode: 'onChange', so type past 120 characters to watch it flip.

Outside a FormField the hook throws immediately, before it touches the missing context — so the message you get names the real mistake instead of a downstream crash. It is a client hook: calling it from a Server Component throws Attempted to call useFormField() from the server.

Which FormField?

The package ships two components called FormField, and they solve different problems. The one on this page, from @comitor/ui/form, is the react-hook-form binding — a render-prop wrapper around Controller that draws no markup of its own. The other, from @comitor/ui, is a Tier 2 layout composite: label, control slot, description and error on a 12-column grid, with no form library involved.

// ── Controlled by react-hook-form ────────────────────────────────
// Render-prop wrapper around RHF's <Controller>. Needs control + name.
import { FormField, FormItem, FormLabel, FormControl } from '@comitor/ui/form'

<FormField
  control={form.control}
  name="email"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl><Input {...field} /></FormControl>
    </FormItem>
  )}
/>

// ── Layout only, no form library ─────────────────────────────────
// Tier 2 composite: label + control + description/error on a 12-column grid.
import { FormField, FormSection, Input } from '@comitor/ui'

<FormSection title="Contact">
  <FormField label="Email" required colSpan={6} error={errors.email}>
    {(control) => <Input {...control} value={email} onChange={onChange} />}
  </FormField>
</FormSection>

// Never import both in one file — same name, different components.

Props

Accessibility

• FormLabel sets htmlFor to the generated control id, so clicking the label focuses the input and screen readers announce the pairing.
• FormControl always points aria-describedby at the description, and appends the message id only while the field is invalid — so the error is announced when it appears rather than sitting silently in the accessible description.
• When a field has an error the control receives aria-invalid="true" and the label gets data-error="true", conveying state beyond color alone.
• Error text uses the -ink step of the destructive role rather than the background step, so it follows the high-contrast palette instead of staying pinned to the default one.
• Every id is derived from React.useId() per FormItem, so labels and messages stay correctly associated even with many fields on the page.
• FormControl is a Radix Slot: it merges its props onto exactly one child. Wrapping two elements silently drops the ARIA wiring.