Time Picker
Forms
Date & Time
Select time with 12-hour or 24-hour format using increment/decrement controls. Perfect for scheduling and time-based settings.
Preview
Time picker with AM/PM selector
Format Options
12-hour and 24-hour time formats
12-Hour Format (with AM/PM)
24-Hour Format
Preselected Time
Time picker with default value
Disabled State
Time picker in disabled state
Props
TimePicker component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | TimeValue | null | null | The selected time value |
onChange | (time: TimeValue) => void | — | Callback when time is confirmed |
format | '12h' | '24h' | '12h' | Time format |
minuteStep | number | 5 | Minute increment step (5, 15, 30, etc.) |
label | string | — | Label text above the picker |
placeholder | string | 'Select time' | Placeholder when no time is selected |
disabled | boolean | false | Whether the picker is disabled |
TimeValue Type
interface TimeValue {
hour: number // 1-12 for 12h, 0-23 for 24h
minute: number // 0-59
period?: 'AM' | 'PM' // Only for 12h format
}Usage
Import and implementation example
import { TimePicker, TimeValue } from '@/components/ui/time-picker'
export default function Example() {
const [time, setTime] = useState<TimeValue | null>(null)
return (
<>
{/* 12-Hour Format */}
<TimePicker
label="Meeting Time"
value={time}
onChange={setTime}
format="12h"
minuteStep={5}
/>
{/* 24-Hour Format */}
<TimePicker
label="Alarm"
value={time}
onChange={setTime}
format="24h"
minuteStep={15}
/>
{/* With default value */}
<TimePicker
label="Default Time"
value={{ hour: 9, minute: 30, period: 'AM' }}
onChange={setTime}
/>
</>
)
}Features
Built-in functionality
- 12-hour and 24-hour: Both time formats supported
- Increment/decrement controls: Click buttons to adjust time
- Configurable minute step: 5, 15, 30 minute increments
- AM/PM toggle: Easy period switching for 12h format
- Confirm/Cancel actions: Explicit user confirmation
- Design system tokens: Full token support
- Popover interface: Clean dropdown UI
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Trigger button has proper rolePopover uses aria-modalIncrement buttons are labeledKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between controls |
| Enter/Space | Open picker or confirm |
| Escape | Close without saving |
Notes
- Label properly associated with trigger
- Focus trapped within popover when open
- Time announced on selection
- Disabled state prevents interaction