Field

Compound layout primitives for form fields—groups, legends, labels, descriptions, and errors. Aligned with shadcn Field patterns.

Account

<FieldSet className="w-full max-w-md">  <FieldLegend>Account</FieldLegend>  <FieldGroup>    <Field>      <FieldLabel htmlFor="f-email">Email</FieldLabel>      <Input id="f-email" placeholder="you@example.com" type="email" />    </Field>  </FieldGroup></FieldSet>

Usage

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldHint,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from "@reva/ui";

For structure and recipes, see also shadcn Field.

Composition

FieldSet
├── FieldLegend
└── FieldGroup
    ├── Field
    │   ├── FieldLabel
    │   ├── Field (nested, optional — e.g. checkbox in bordered group)
    │   ├── FieldContent
    │   │   ├── FieldTitle
    │   │   └── FieldDescription
    │   ├── FieldHint
    │   └── FieldError
    └── FieldSeparator

For a one-line checkbox row, pair Checkbox and FieldLabel inside Field with orientation="horizontal". Skip FieldContent and FieldDescription when there is no secondary copy.

Accept terms and conditions

<Field className="max-w-md" orientation="horizontal">  <Checkbox id="cb-simple" />  <FieldLabel htmlFor="cb-simple">Accept terms and conditions</FieldLabel></Field>

Field with title and description

Use FieldTitle and FieldDescription inside FieldContent when the label needs supporting copy.

Notifications

Marketing emails

Receive tips and product updates.

<Card className="w-full max-w-md">  <CardHeader>    <CardTitle>Notifications</CardTitle>  </CardHeader>  <CardContent>    <Field orientation="horizontal">      <FieldContent>        <FieldTitle>Marketing emails</FieldTitle>        <FieldDescription>Receive tips and product updates.</FieldDescription>      </FieldContent>      <Switch defaultChecked />    </Field>  </CardContent></Card>

Field with hint text

Use FieldHint for short helper text below the control (not inside FieldContent). Pair with aria-describedby on the input so screen readers announce the hint with the field.

<Field className="w-full max-w-md">  <FieldLabel htmlFor="f-phone-hint">Phone number</FieldLabel>  <Input    aria-describedby="f-phone-hint-desc"    id="f-phone-hint"    placeholder="+44 7512 809832"    type="tel"  />  <FieldHint id="f-phone-hint-desc">    {"You'll set up a 2-factor authentication method with your number."}  </FieldHint></Field>

Separator inside a group

<FieldGroup className="w-full max-w-md" data-slot="field-group" data-variant="outline">  <Field>    <FieldLabel htmlFor="s1">Section A</FieldLabel>    <Input id="s1" />  </Field>  <FieldSeparator>or</FieldSeparator>  <Field>    <FieldLabel htmlFor="s2">Section B</FieldLabel>    <Input id="s2" />  </Field></FieldGroup>

Orientation

Field supports orientation: "vertical" (default), "horizontal", or "responsive" (column on small screens, row from md inside a field group).

Inline label

<Field className="max-w-md" orientation="horizontal">  <FieldLabel htmlFor="oh">Inline label</FieldLabel>  <Input className="flex-1" id="oh" placeholder="Value" /></Field>

Base layout

Field includes min-w-0, w-full, and gap-2 on the root so flex rows don’t overflow and spacing matches Stack’s default step. Pass className to override (for example gap-4 or min-w-[12rem]).

Props

These components are styled wrappers around semantic HTML and Radix Label where applicable. For behavior details, refer to shadcn Field and the underlying HTML elements (fieldset, legend, div, p).

Component	Role
`FieldSet`	Native `<fieldset>` wrapper for grouped controls.
`FieldLegend`	`<legend>` with optional `variant="label"`.
`FieldGroup`	Spacing container for multiple `Field` rows.
`Field`	Row wrapper; supports `orientation` via `fieldVariants`.
`FieldLabel`	Wraps `Label` with field spacing styles.
`FieldTitle`	Title line inside `FieldContent` (pairs with subtitle copy).
`FieldDescription`	Subtitle or supporting copy inside `FieldContent` (below `FieldTitle`). Uses `text-sm`.
`FieldHint`	Helper text below the control; sibling of `FieldError`. Uses `text-2xs` and `text-fg-muted`.
`FieldSeparator`	Horizontal rule; with `children`, uses the same labeled styling as `Divider` (`labelPosition="center"`).
`FieldError`	Error region; pass `errors` array or `children`.