i

Time picker

Entering · researched

A field for typing or choosing a time of day.

molecule

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

TimePicker native: partly antd 6.6.5
Variants
outlined, borderless, filled, underlined
Sizes
large, medium, small
States documented
default, disabled, error
Accessibility guidance
no

Native text input as the field; the popup panel is divs with ul/li columns (rc-picker). Status prop takes error/warning/success/validating.

docs ↗ · code ↗

Carbon

Time picker subset native: yes @carbon/react 1.117.0
Variants
Default, Fluid
Sizes
small (sm), medium (md), large (lg)
States documented
default, hover, focus, error, disabled
Accessibility guidance
yes

Documented as a section of the Date picker page (components.json lists it as a child of Date picker, overview:false). A text input (type text, pattern hh:mm) plus optional native selects for AM/PM and time zone; no native time input. Accessibility tab is the date picker's and says date and time pickers need labels.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/date-picker/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/TimePicker"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/date-picker/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/TimePicker"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked the Components index (https://design-system.service.gov.uk/components/), the Patterns index (https://design-system.service.gov.uk/patterns/), the Styles index (https://design-system.service.gov.uk/styles/) and the repo components directory (alphagov/govuk-frontend packages/govuk-frontend/src/govuk/components, plus installed 6.5.1 dist). No time picker. The Date input component and Dates pattern cover day/month/year only, with no time of day.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. Time picker is listed under unbuilt components in the roadmap. The text field's supported type list (text, textarea, email, number, password, search, tel, url) does not include time.

Primer

absentPrimer does not ship this component. Nothing is drawn in its place.

No time picker in the component index, Internal Components list (only DatePicker, which is internal-only), or src/ tree.

Spectrum

TimeField native: no
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
S, M, L, XL
States documented
default, disabled, error
Accessibility guidance
yes

Not on spectrum.adobe.com and not in SWC 1st-gen or 2nd-gen; it ships in React Spectrum (v3 docs page read, S2 TimeField.mdx and source read for sizes). Segments are contenteditable divs (React Aria useDateSegment, role textbox) with a hidden date input for form submission; the v3 Accessibility section only covers labelling.

1 corrected on re-read
  • urls: {"docs_url":"https://react-spectrum.adobe.com/react-spectrum/TimeField.html","code_url":"https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/src/TimeField.tsx"} → {"docs_url":"https://react-spectrum.adobe.com/v3/TimeField.html","code_url":"https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/src/TimeField.tsx"} prior docs_url /react-spectrum/TimeField.html redirects (200) to /v3/TimeField.html; code_url 200

docs ↗ · code ↗

USWDS

Time picker native: partly @uswds/uswds 3.14.0
Variants
—
Sizes
—
States documented
default, disabled
Accessibility guidance
yes

Markup is a plain text input; the JS builds a select and enhances it into a combo box with a listbox.

docs ↗ · code ↗

Platform facts

Native elementinput type=timeSpec Time state: value is a valid time string or empty; attributes min, max, step (seconds, default 60), list, readonly, required. Periodic domain. MDN: no validation beyond the UI unless min/max/required are set. The picker appearance is browser-specific; custom dropdown pickers are not in HTML.
Baseline—
APG patternnone
ARIA role—
Shipped by4 of 7 systems

Anatomy

  1. label — label element; MDN example labels the time input.
  2. time input — input type=time: spec says it represents a control for setting a specific time; hours and minutes, optionally seconds (MDN). The picker UI is drawn by the browser.
  3. validity message optional — MDN example uses a span for feedback; plain term, not a named HTML part.

The seven states

default Empty or holding a time.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Inference, no source: focus lands on the input; segment-level focus and picker UI are browser-specific.
active n/a — No distinct pressed state defined.
disabled disabled attribute; readonly also applies (MDN).
error Constraint validation: required, min/max and step mismatch; bad input when the UI holds an unconvertible value (spec).
loading n/a — Not defined by HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 2 of 35 fields changed on the second read — open any “corrected” note to see what it said before.