Field – Once UI

Field puts a label above a control, a hint under it and an error when there is one, and connects them. The control gets its id, aria-describedby, aria-invalid and aria-required from the field, merged with any it already has, so a screen reader hears the error the moment it appears.

Field

We only use it to send receipts.

Workspace

That name is taken. Try another.

Lowercase letters and dashes.

<Field label="Email" hint="We only use it to send receipts." required>
  <Input id="email" placeholder="you@example.com" />
</Field>

<Field label="Workspace" error={errors.workspace} hint="Lowercase letters and dashes.">
  <Input id="workspace" />
</Field>

What it wires

The label's htmlFor points at the control's id. The control keeps its own id; a control without one gets a generated id.
aria-describedby lists the control's own description first, then the error, then the hint.
While error is set the control is aria-invalid. Input, Textarea and the fields built on them, such as Select, PasswordInput and NumberInput, also draw their error styling, with no separate error prop.
required adds aria-required and an asterisk after the label. The asterisk is hidden from screen readers so it is not read out twice.

The hint stays visible while the error shows, so the instruction is still there when the user goes back to fix the value.

Any control

Native elements and third-party controls get the same props. For a control that needs them somewhere other than its root, pass a function: it receives the props to spread.

Tsx

<Field label="Plan" error={errors.plan}>
  {(control) => <MyPlanPicker inputProps={control} />}
</Field>

A custom control can also read the field from context with useField(), which returns the id, invalid, required and describedBy of the enclosing field, or null outside one.

In a Form

A Field takes span like any other field, and lays out in a Form grid. With density="stacked" the controls still fuse; the labels and messages sit outside the group's border.

Form

First name

Last name

Bio

Shown on your profile.

<Form columns={2}>
  <Field label="First name"><Input id="first" /></Field>
  <Field label="Last name"><Input id="last" /></Field>
  <Field label="Bio" hint="Shown on your profile." span={2}>
      <Textarea id="bio" lines={3} />
  </Field>
</Form>

API reference

	Type	Default
label Visible label above the control, linked to it with htmlFor.	ReactNode	—
hint Helper text under the control, read out as part of its description.	ReactNode	—
error The error message. While it is set the control is marked invalid.	ReactNode	—
required Adds aria-required and an asterisk after the label.	boolean	false
controlId The control's id. Defaults to the control's own id, then to a generated one.	string	—
span Columns to occupy inside a Form grid.	number	—
childrenrequired One control element, or a function that receives the control's props.	React.ReactNode	—
className	string	—
style	React.CSSProperties	—
…and every React.HTMLAttributes prop	inherited	—