Field anatomy

The field family is one component wearing different controls. A text input, a textarea, a search field, a PIN, a dropdown, a multi-select, an autocomplete, a calendar, a radio group and a switch all render the same four parts, resolve the same axes and announce themselves the same way. Learn one and you have learned the shape of the rest.

The four parts

A field draws them in that order, so the reading order and the visual order agree.

Status

status colours the field and decides how the message is announced. It takes "default", "error", "warning" or "success".

An "error" message is announced immediately, the field's message element carries role="alert", because a validation failure the reader has to go looking for is a validation failure they will miss. Every other status is a note, and a note does not interrupt.

<Input
  label="Email"
  description="We send the invoice here."
  message="An email address needs an @."
  status="error"
  required
/>

The message is not a tooltip, and the status is not a colour: both are part of the field, so a screenshot, a printed page and a screen reader all carry them.

The shared axes

Every field resolves the same seven axes through the cascade, so a form is configured once rather than per control:

They are set once in the configuration (see Configuration) and overridden per instance when one field differs:

export default {
  components: {
    input: { size: "lg", radius: "full" },
    radio: { variant: "card" },
  },
};

States

A field is available, unavailable or busy:

• required marks it mandatory. The marker on the label is decorative; the control itself carries the required attribute, so the requirement is announced rather than only drawn. aria-invalid follows status, so an error field is invalid to assistive technology and not merely red.
• isDisabled (or disabled) marks it unavailable. The control stays findable, and the label explains what it is.
• isLoading marks it busy, reading a remote value, checking a handle, and the control stops accepting input while the label stays put.

How the parts are associated

The label, description and message are wired to the control by id: the label uses htmlFor, and the control points at the description and the message through aria-describedby. That is why nothing has to be restated and why a field cannot ship with a message that nothing announces.

When a field's label is visually hidden, a search field in a toolbar, for instance, it is still rendered, and referenced with aria-labelledby instead of htmlFor. A hidden label is still a label.

Every field

For how these compose into a working form, validation, submission, focus, see Building a form.