This page ships a Markdown twin for AI tools.

ComponentsTimeField

formstexulinot agent-emittableapp

TimeField

time-field

A labelled time of day typed or stepped by segment (hour, minute, AM/PM), with a 24-hour HH:mm value.

Forms with the wiring documented, not guessed. Form controls take labels, descriptions and error text through props, and their keyboard and screen-reader behavior is documented in the accessibility notes below — generated from the manifest, not hand-maintained. The repository’s behavior suite holds the underlying patterns on Chromium, WebKit and a Pixel 7.

Live examples

Reminder time

Reminder time

Loading demo…

In your theme

This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.

  • Violet

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Monochrome

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Accessible Dark Contrast

    dark mode · AAA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

Props

Public props for TimeField
NameKindRequiredDefaultDescription
labelstringyes—Visible label and accessible name
descriptionstringno—Help text under the field
errorstringno—Error text; also marks the field invalid
valuestringno—The time as HH:mm (24-hour), or null when empty (bind:value)
onValueChangeeventno——
localestringno"en-US"—
hourCyclenumberno—12 shows AM/PM, 24 does not; default the locale cycle
minuteStepnumberno1Minutes the arrow keys move on the minute segment
disabledbooleannofalse—
requiredbooleannofalse—
namestringno—Form field name: submits the value
sizeenum (sm, md)no"md"—
labelsobjectno—Segment names (hour, minute, dayPeriod) for translation
classstringno——

Keyboard

Keyboard behavior for TimeField
KeyAction
AA labelled group of native number inputs (hour, minute) and an AM/PM select; arrows step the segments

Accessibility

  • A labelled group of native number inputs (hour, minute) and an AM/PM select; arrows step the segments
  • Description and error are linked to the group; an error marks it invalid

Evidence for time-field

Latest committed gates for time-field (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

texuli/time-field · budget 12.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • A time of day on its own, such as a reminder or an opening hour

Don’t use when

Prefer another component

  • A date, or a date and time (use the date pickers)
  • A duration (use a number field)