Field

Groups a control with its label, description, and error, and wires up accessibility and validation.

We only use it to send receipts.

When to use

Use when: Any form control that needs a label, a description, and an error message.
Avoid when: The control has no label or validation, such as a search input in a toolbar.

Installation

bunx shelf add field

The source lands in src/components/ui/field.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Field from "@/components/ui/field";
import { Input } from "@/components/ui/input";

<Field.Root name="email">
  <Field.Label>Email</Field.Label>
  <Input type="email" required />
  <Field.Description>We never share it.</Field.Description>
  <Field.Error match="valueMissing">Enter your email.</Field.Error>
</Field.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.