Default
Start time
930
Show the codeHide the code
Default, code
<TimeField label="Start time" defaultValue={new Time(9, 30)} />TimeField
A time typed in hour and minute segments; 24-hour in en-GB unless you ask for 12.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Spinbutton segments (time)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
12-hour clock
Start time
215pm
Show the codeHide the code
12-hour clock, code
<TimeField label="Start time" defaultValue={new Time(14, 15)} hourCycle={12} />Invalid
Start time
––––
Error: Enter a start timeShow the codeHide the code
Invalid, code
<TimeField label="Start time" isRequired isInvalid errorMessage="Enter a start time" />Disabled
Start time
930
Show the codeHide the code
Disabled, code
<TimeField label="Start time" isDisabled defaultValue={new Time(9, 30)} />Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/time-fieldThen import it
import { TimeField } from "@/components/ui/time-field"Props
| Prop | Type | What it does |
|---|---|---|
labelrequired | string | Visible label (required). |
hint | string | |
errorMessage | string | ((validation: ValidationResult) => string) | |
hideLabel | boolean |
When to use it
Use it for
- Meeting and delivery times
- Opening hours
Use something else for
- Durations: use NumberField with a unit
- A date and a time together: pair DatePicker with TimeField
Accessibility
Screen readers announce "Start time, group" then "hour, 9, spin button".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- State the time zone when it is not the user's own
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 100 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 200 text runs: 0 below 7:1, lowest 8.43:1 |
| Target size | 34 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 36 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the hour segment |
| ArrowUp | Up adds an hour |
| ArrowRight | Right moves to the minutes |
| ArrowDown | Down takes a minute off |
In Figma
The Figma component is TimeField, with State (Default, Hover, Focus, Disabled, Invalid); Label visibility (Visible, Hidden); Clock (24-hour, 12-hour). The Figma library isn’t published yet.
Figma to code: State (Default, Hover, Focus, Disabled = isDisabled, Invalid = isInvalid); Label visibility → hideLabel (Visible = false, Hidden = true); Clock → hourCycle (24-hour = 24, 12-hour = 12); Value → defaultValue (new Time(h, m)); nested Label → label; nested Hint → hint; nested FieldError → errorMessage.