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