form · Normal DOM only

Field

Label + control + hint / error composition. Owns the id and aria-invalid wiring.

Field is the single most common form primitive — it generates a stable id, passes it down via a render-prop, and slots a hint or error below the control with the right typography and color. Use it everywhere a form input has a visible label.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Field } from '@8maverik8/twenty-design';

Examples

Email with hint and validation

We never share your address.
Doesn’t look like an email.
tsx
<Field label="Email" required hint="We never share your address." error={!valid && 'Doesn\'t look like an email.'}>
  {({ id, 'aria-invalid': invalid }) => (
    <Input id={id} invalid={invalid} fullWidth startSlot={<IconMail size={14} />} placeholder="you@example.com" />
  )}
</Field>

Anatomy

labelBound to the control via htmlFor → id.
children(id, aria-invalid)Render-prop receives the generated id and the current invalid state. Use both on your control.
hintQuiet helper text under the control — disappears when error is present.
errorReplaces hint when truthy. Triggers invalid styling.

Guidelines

✓
Always spread the render-prop id and aria-invalid on the control.Without them the label is decorative and a11y is broken.
✓
Pass error as a string only when there is something to act on.Truthy non-strings still trigger invalid styling — keep the message specific.
✕
Stack two Fields with the same label on one row.Use one Field with a FormGroup of two controls inside instead.