Field
A visible label, description, and validation message associated with one native labelable control.@gemologic/sheen · formsPlayground
Visible to the team.
<Field label="Notes" description="Visible to the team." disabled={false} required={false}>{control => <textarea {...control} />}</Field>Variant matrix
Custom native control
Visible to the team.
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Field.tsx- Tokens
--sheen-color-fg-muted--sheen-color-danger-fg--sheen-space-block-xs
Accessibility
Role: native label association; no additional landmark or live regionKeyboard: Native control behavior, Label activation focuses its controlDo
- Use within wrapper implementations or for a custom labelable control. Input already composes Field.
- Keep controls mounted when descriptions or errors change. Apps own validation and announcements.
Do not
- Do not wrap a labeled Input in another Field.
- Do not use a single Field label for a group of controls; use group semantics.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Required visible label. |
controlId | string | undefined | — | Override the stable generated control ID; must be unique in the document. |
description | string | undefined | — | Supporting instructions referenced by aria-describedby. |
error | string | undefined | — | Validation message, also referenced by aria-describedby. A nonempty error sets aria-invalid. |
required | boolean | undefined | false | Set native required and display a decorative required marker. |
disabled | boolean | undefined | false | Forward native disabled to the control. |
children * | (control: FieldControlProps) => JSX.Element | — | Render one labelable control and spread the supplied reactive bindings on it. Do not destructure or snapshot them. |