Form

Accessible form primitives for labelling, grouping, and validating inputs.

Must be at least 8 characters.

export default function FormHero() {
  return (
    <Form className="flex w-80 flex-col gap-5">
      <Field name="email">
        <FieldLabel>Email</FieldLabel>
        <Input type="email" placeholder="you@company.com" />
        <FieldError />
      </Field>
      <Field name="password">
        <FieldLabel>Password</FieldLabel>
        <Input type="password" placeholder="••••••••" />
        <FieldDescription>Must be at least 8 characters.</FieldDescription>
        <FieldError />
      </Field>
      <label className="flex cursor-pointer items-center gap-2 text-sm text-primary">
        <Checkbox name="remember" />
        Remember me for 30 days
      </label>
      <Button type="submit" className="w-full">
        Sign in
      </Button>
    </Form>
  );
}

Installation

pnpm dlx shadcn@latest add "https://ora-ui.com/r/form.json"

Usage

import {
  Form,
  Field,
  FieldLabel,
  FieldControl,
  FieldDescription,
  FieldValidity,
  FieldError,
  Fieldset,
  FieldsetLegend,
} from '@/registry/ui/form';

<Form>
  <Fieldset>
    <FieldsetLegend>Account</FieldsetLegend>
    <Field name="email">
      <FieldLabel>Email</FieldLabel>
      <FieldControl />
      <FieldDescription>We'll never share your email.</FieldDescription>
      <FieldError />
    </Field>
  </Fieldset>
</Form>;

Examples

Product form

A settings-style form combining text inputs, checkboxes, and radio buttons across multiple field groups.

Profile

Used for notifications and sign-in.

Notifications
Delivery frequency
export default function FormProduct() {
  return (
    <Form className="flex w-96 flex-col gap-8">
      <Fieldset>
        <FieldsetLegend>Profile</FieldsetLegend>
        <Field name="name">
          <FieldLabel>Display name</FieldLabel>
          <Input placeholder="Jane Smith" />
          <FieldError />
        </Field>
        <Field name="email">
          <FieldLabel>Email</FieldLabel>
          <Input type="email" placeholder="jane@company.com" />
          <FieldDescription>Used for notifications and sign-in.</FieldDescription>
          <FieldError />
        </Field>
      </Fieldset>
      <Fieldset>
        <FieldsetLegend>Notifications</FieldsetLegend>
        {NOTIFICATION_OPTIONS.map(({ value, label }) => (
          <label
            key={value}
            className="flex cursor-pointer items-center gap-2 text-sm text-primary"
          >
            <Checkbox name={value} />
            {label}
          </label>
        ))}
      </Fieldset>
      <Fieldset>
        <FieldsetLegend>Delivery frequency</FieldsetLegend>
        <RadioGroup defaultValue="daily" className="gap-2">
          {FREQUENCY_OPTIONS.map(({ value, label }) => (
            <label
              key={value}
              className="flex cursor-pointer items-center gap-2 text-sm text-primary"
            >
              <RadioGroupItem value={value} />
              {label}
            </label>
          ))}
        </RadioGroup>
      </Fieldset>
      <Button type="submit">Save changes</Button>
    </Form>
  );
}

API Reference

This component wraps three separate Base UI primitives. For the full prop reference, see:

  • Field — Field, FieldLabel, FieldControl, FieldDescription, FieldValidity, FieldError
  • Fieldset — Fieldset, FieldsetLegend
  • Form — Form