Skip to content
v2.5.0
English
Русский
Documentation

TimeField

TimeField is a compound component for masked time entry.
StorybookSource

Labeling

  • Pair TimeFieldInput with a visible Label.
  • The label should make the time format expectation clear when needed.

Keyboard Behavior

AnnouncementFocus the demo and press a key from the table.
KeyAction
↑↓With the caret in the hours: steps them by one. In the minutes or seconds: steps them by step (1 by default). A segment wraps around its range without changing the others. step={0} turns stepping off.
Every row is checked in a real browser: Playwright presses the key in Chromium and checks where the focus and the active item land.
  • Keyboard entry remains native text input behavior shaped by the mask.

Focus Behavior

  • Focus lands on the input and uses inherited TextField focus styling.

Screen Reader Semantics

  • The control is still a native input.
  • Users may need explicit helper copy for the expected time format.

Form Semantics

  • Put name and required on TimeFieldInput, and value or defaultValue on TimeField.
  • Keep bounds and format aligned with the submitted value format.

Accessibility Risks

  • unclear 24-hour vs seconds expectations
  • invalid range communicated only by visuals
  • missing visible label