Field

Combine labels, controls, and help text into accessible form fields and grouped inputs. Supports vertical, horizontal, and responsive orientations plus validation via `FieldError`.

Basic

Label, control, and optional FieldDescription in a vertical stack.

Installation

CLI

npx @sonojs/ui@latest add field

Also needsnpx @sonojs/ui@latest add label separator

Composition

structure

FieldSet
├── FieldLegend
├── FieldDescription
└── FieldGroup
    └── Field
        ├── FieldLabel
        ├── Input / Checkbox / …
        ├── FieldDescription
        └── FieldError

Usage

field.tsx

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function Example() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="name">Full name</FieldLabel>
        <Input id="name" placeholder="Evil Rabbit" />
        <FieldDescription>This appears on invoices and emails.</FieldDescription>
      </Field>
    </FieldGroup>
  )
}

Props

Prop	Type	Default	Description
orientation	"vertical" · "horizontal" · "responsive"	"vertical"	On Field — layout of label vs control. responsive uses @container/field-group.
variant	"legend" · "label"	"legend"	On FieldLegend — label sizes the legend like a FieldLabel.
data-invalid	boolean	—	On Field — turns label/description/error into the destructive state.
errors	Array<{ message?: string }>	—	On FieldError — renders one message or a list from form validators.