Label and Field

A label, description and error wired to one control by id.

Import
import { FieldRoot, FieldLabel, FieldControl, FieldDescription, FieldError, LabelRoot } from '@texuli/primitives/label';
Pattern
Native labelling
Size budget
4.0 KiB gzip for @texuli/primitives/label
Reference
packages/primitives/docs/prim-label.md

Live demo

Loading the Label and Field demo…

Anatomy

Label and Field anatomy: each box holds the parts inside it.
  • FieldRoot
    • FieldLabel
    • FieldControl
    • FieldDescription
    • FieldError
  • LabelRootstandalone label

Behavior checks

tests/behavior/scenarios/label.spec.ts runs 8 rows against the Label and Field scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 8 rows
  1. labels give their controls an accessible name, by for or by wrapping
  2. pressing a label focuses its text field and toggles its checkbox
  3. labels never take focus; Tab reaches the text fields in order
  4. the field is described by its help text
  5. an invalid field says so and is described by its error, then recovers
  6. the error is announced from a polite live region that exists before it appears
  7. double-clicking a label does not select its text
  8. axe finds no violations, valid and invalid

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.0 KiB gzip for @texuli/primitives/label (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).