Fieldcomponent

A <Field> wraps around a form control/input, to shows a small <label> above it.

The visual wrapper for a single form control. Field renders a <label> with an optional title and description above the input, and an inline error message below it. Use it when composing inputs by hand rather than relying on the automatic fields rendered by <Form>.

Things to know:

• Full width by default (one field per row). Pass half to render at 50% so two fields sit side-by-side.
• The message prop renders below the input as an error <Message> — wire it to the field's error string.
• <FormInput> combines a field's value, error, and schema lookup from the surrounding FormContext; reach for Field directly when you want explicit control over the label and layout.

Usage

Standalone field

import { Field, TextInput } from "shelving/ui";

<Field title="Email address" message={emailError}>
  <TextInput name="email" value={email} onValue={setEmail} required />
</Field>

Two-up layout

import { Field, TextInput } from "shelving/ui";

<Field title="First name" half>
  <TextInput name="first" value={first} onValue={setFirst} />
</Field>
<Field title="Last name" half>
  <TextInput name="last" value={last} onValue={setLast} />
</Field>

Styling

Field paints its label, description, and message text. Override these hooks at :root or any ancestor scope.

Global tokens it reads: the tint ladder --tint-00 and --tint-70, plus --space-paragraph, --space-xsmall, --size-normal, --weight-strong, --weight-normal, and --leading.