Label, hint, error and required marker for any control, wired through context.
Field renders the label and messages and hands ids to the control inside it (useField). group=true renders a fieldset and legend for RadioGroup and Checkbox lists.
Usage
import { Field } from "@/components/ui";
<Field label="Email" required error={errors.email}><TextInput type="email" /></Field>Examples
Required, optional, error
For delivery questions only.
Enter an email address.
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Field
| Prop | Type | Default | Description |
|---|---|---|---|
| labelRequired | ReactNode | ||
| hint | ReactNode | ||
| error | ReactNode | Presence marks the control invalid. Say what to do, not just what is wrong. | |
| required | boolean | false | |
| optional | boolean | Shows "(optional)". Use on forms where most fields are required. | |
| id | string | Pass to link a field to an ErrorSummary entry. Generated otherwise. | |
| group | boolean | fieldset + legend, for RadioGroup, a checkbox list, OtpInput, DateField. | |
| labelStyle | "sentence" | "caps" | "sentence" | sentence = 13px bold (default, reads well for long labels). caps = the reference 11.5px uppercase micro-label, for short auth/admin forms. |
| labelAction | ReactNode | Something on the label's right edge, e.g. a "Forgot password?" link. | |
| hideLabel | boolean | ||
| className | string | ||
| childrenRequired | ReactNode |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
This component has no tokens of its own; it reads the system tokens below.
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --danger-ink | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-small | tokens.css | … |
Accessibility
- The error is linked by aria-describedby and the control gets aria-invalid.
- labelStyle="caps" is the compact auth-card label; sentence case everywhere else.
Do and don't
Do
- Mark the rare field instead: if most are required, mark the optional ones.
Don't
- Don't hide the label; use hideLabel only when a visible heading already names the control.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open field.md