Field New Alpha Light DOM & Tailwind

Usage

Field is a composable wrapper for a single form control. Combine it with its parts to lay out a control with a label, helper text and an error message, and group related fields together under a legend.

Import the parts you need — each import registers its custom element:

import "@nordhealth/components/lib/Field"
import "@nordhealth/components/lib/FieldContent"
import "@nordhealth/components/lib/FieldDescription"
import "@nordhealth/components/lib/FieldError"
import "@nordhealth/components/lib/FieldGroup"
import "@nordhealth/components/lib/FieldLabel"
import "@nordhealth/components/lib/FieldLegend"
import "@nordhealth/components/lib/FieldSeparator"
import "@nordhealth/components/lib/FieldSet"
import "@nordhealth/components/lib/FieldTitle"

Then compose them around your controls:

Composition

The Field family is designed for composing accessible forms. A typical field pairs a Field Label with a control, and optionally a description and an error.

Field
├── FieldLabel
├── Control (Input / Select / Toggle / …)
├── FieldDescription   (optional)
└── FieldError         (optional)

<nord-field>
  <nord-field-label for="input-id">Label</nord-field-label>
  <!-- input, select, toggle, etc. -->
  <nord-field-description>Optional helper text.</nord-field-description>
  <nord-field-error>Validation message.</nord-field-error>
</nord-field>

Field

Field is the core wrapper for a single control. Its orientation attribute controls the layout:

• vertical (default) stacks the label, control and helper text.
• horizontal places the label and control side by side, vertically centered.
• responsive is vertical on narrow containers and horizontal once the surrounding Field Group is wide enough.

Use Field Content to keep a label and description aligned in horizontal and choice-card layouts, and Field Title for an emphasized inline title.

Field Group

Field Group stacks several fields with consistent spacing. Add a Field Separator between sections where a visual divider helps.

FieldGroup
├── Field
├── FieldSeparator   (optional)
└── Field

Field Set

Wrap a Field Group in a Field Set with a Field Legend to group related fields under a labelled, accessible section. Field Set exposes role="group" named by its legend, and an optional Field Description gives the group a hint.

Field Set is the composable successor to the deprecated Fieldset; reach for it in new code, and migrate existing nord-fieldset usage when convenient.

FieldSet                  (role="group", labelled by the legend)
├── FieldLegend
├── FieldDescription      (optional)
└── FieldGroup
    ├── Field
    │   ├── FieldLabel
    │   ├── Control
    │   ├── FieldDescription
    │   └── FieldError
    └── Field
        ├── FieldLabel
        └── Control

Forms

Nord form controls participate in forms natively, so a control inside a Field submits its value like any other form control — Field only handles layout and labelling, it doesn't change form behaviour.

Validation

Field is validation-presentational: you decide when a field is invalid (Field does not run constraint validation itself) and reflect it by setting invalid on the nord-field and rendering a Field Error. From there Field wires up the accessibility for you:

• invalid propagates to the control. Setting invalid on the nord-field marks the wrapped control invalid too — driving the control's own invalid state (and its inner aria-invalid) for Nord controls, or setting aria-invalid directly on a native/third-party control. You don't need to set invalid in two places; setting it back to false clears it on the control again. (A control you mark invalid on its own is left untouched.)
• The error and description are announced. Field points the control's aria-describedby at any Field Description and Field Error, so assistive technology reads them out when the control is focused. Field Error is a polite live region, so a newly added message is announced.

<nord-field invalid>
  <nord-field-label for="email">Email</nord-field-label>
  <nord-input id="email" type="email" value="not-an-email"></nord-input>
  <nord-field-error>Enter a valid email address.</nord-field-error>
</nord-field>