DateField

A segmented date (or time) input, one spin button per segment.

Import
import { DateField, TimeField } from '@texuli/primitives/date-field';
Pattern
Spinbutton (per segment) (WAI-ARIA APG)
Size budget
4.0 KiB gzip for @texuli/primitives/date-field
Reference
packages/primitives/docs/prim-date-field.md

Live demo

Loading the DateField demo…

Anatomy

DateField anatomy: each box holds the parts inside it.
  • DateField.Rootrenders the segments
  • TimeField.Root

Behavior checks

tests/behavior/scenarios/date-field.spec.ts runs 5 rows against the DateField 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 5 rows
  1. date and time controls expose labelled groups and named segments
  2. pointer activation focuses a date segment
  3. keyboard arrows operate a time segment
  4. touch can focus a date segment on mobile
  5. date and time fields have no axe violations

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/date-field (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).