Design system

Field

A layout primitive for labels, controls, descriptions, and errors.

Use Field to keep a control and its supporting text aligned as one accessible group.

Built on Workshop1 compositionUpstream API

Shown to your customers on public pages.

Use the registration from the vehicle documents.

Import

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@workshop1/ui/components/field"

Composition

Use FieldGroup for a stack of fields. Put the label and control in Field, and place supporting text in FieldContent with FieldDescription or FieldError. FieldSet and FieldLegend group related controls; FieldSeparator divides sections.

Orientation

Field defaults to vertical. Use orientation="horizontal" for compact settings rows or orientation="responsive" when the layout should stack on narrow containers and align in a row at the container breakpoint.

Validation

Set data-invalid="true" on the field and aria-invalid="true" on its control. Render FieldError with errors or children so the message is exposed with role="alert". Keep descriptions and errors next to the control they describe.

Best practices

  • Use one Field per control and associate labels with htmlFor and id.
  • Keep help text short and actionable.
  • Use FieldSet and FieldLegend for a group of related checkboxes or radios.