Form Field primitive

Headless Form Field: the behavior, keyboard support and ARIA of the WAI-ARIA `aria-describedby` pattern, with no styles.

@ndop/primitives/form-field
WAI-ARIA: `aria-describedby`

Import

Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Form Field is built on this one.

import {
  NdField,
  NdFieldDescription,
  NdFieldError,
} from '@ndop/primitives/form-field';

Accessibility

Implements the `aria-describedby` pattern of the WAI-ARIA Authoring Practices.

Focus

A field never moves focus. An error appearing doesn't take focus; it's announced.

Right-to-left

Nothing mirrors.

API reference

NdField

[ndField]role groupfrom @ndop/primitives/form-field

Headless form field: ties one control to its description and error. The control's aria-describedby lists the description and, while the field is invalid, the error, which is hidden until then and announced when it appears. The field mirrors its control's state as data-invalid and data-disabled. Ndop's controls join the field around them: input[ndInput], textarea[ndInput], Checkbox, Switch, Radio Group, Slider thumbs and Input OTP.

NdField binding	Type	Default
`[invalid]` Marks the field invalid by hand, for errors no control reports.	`boolean`	`false`

Data attribute	Values
`data-invalid`	—
`data-disabled`	—

NdFieldDescription

[ndFieldDescription]from @ndop/primitives/form-field

Help text for a NdField's control, which lists its id in aria-describedby. Keeps its own id or gets a generated one. Outside a field, such as under a field set's legend, it's plain text.

NdFieldError

[ndFieldError]role alertfrom @ndop/primitives/form-field

The error message of a NdField: hidden while the field is valid, and announced (role="alert") when it appears. While shown, the control's aria-describedby lists it. Put the messages inside it.