Field | Quartz design system

Examples

Checked when you leave

An error in place of the hint

A short form

When to use it

Use: Any control the person fills: Input, Textarea, Combobox, Date picker, Select.
Use: A Switch or Checkbox that needs a sentence of explanation beside it.
Use: A set of fields that submit together, wrapped in Form.
Not for: A search box in a toolbar names itself with aria-label. Use Input.
Not for: A row of filters, not a form. Use Filter bar.
Not for: A message about the whole page or account. Use Alert.

8 rules

Must: Leave validationMode unset so a field checks on blur, then on change while invalid. Because onChange flags the value as wrong on the first keystroke, before the person has finished typing it.
Must: Wrap fields that submit together in Form with a type="submit" Button, and pass pending to both. Because without Form, Enter in a field submits nothing and a second press sends the request twice.
Must: Pass server rejections to Form errors keyed by field name, not to a toast. Because a toast disappears and is tied to no control, while Form errors mark the field invalid under its own label.
Must: Name a control with FieldLabel inside a Field, or Label htmlFor outside one, never a styled p. Because a p is not a label, so the control has no accessible name and a click on the text does not focus it.
Should: Write an error as what to do, in a sentence with a period.
Should: Mark the few optional fields with optional and mark nothing else.
Never: Style an error as raw red text; use FieldError. Because a loose p is not in the control's aria-describedby, so a screen reader never reads it, and red-600 is not the fail text step.
Should: Keep a FieldDescription to one sentence under 120 characters.

5 checks

: FieldLabel is a native label bound to the control; a click on it focuses the control.
: FieldDescription and FieldError link by aria-describedby; the control gets aria-invalid.
: Tab leaves the control and validates it; Enter in a Form submits, and does nothing while pending.
: Form sets aria-busy while pending; FormStatus is a polite status region.
: The error is text, so it survives forced colors.

10 edge cases

Long label and error: Both wrap; nothing has a fixed height.
Right to left: Label, hint and error align to the inline start; FieldSeparator centres logically.
Inside a disabled FieldSet: Every Field and the buttons in its controls take the disabled state.
120px wide: Label, control and error stack; responsive stays vertical.
No FieldLabel: The control is unnamed; add the label or aria-label.
Disabled and invalid: Disabled wins; validation is skipped and the error hides.
Server and client error: FieldError dedupes and lists both.
Enter three times while pending: One request is sent; Form drops the rest.
Failed submit: Values stay and the first invalid field takes focus.
Zoom 200%: Label, hint and error wrap and grow.

7 props

11 tokens