TimePicker
TimePicker allows users to select times using a wheel picker interface. Use for scheduling, reminders, or recording time-based data.
Preview
Section titled “Preview”9:30 AM
Basic Usage
Section titled “Basic Usage”9:30 AM
const [time, setTime] = useState<Date | null>(null);
<TimePicker value={time} onValueChange={setTime} label="Reading Time"/>With Label
Section titled “With Label”REMINDER TIME
8:00 AM
<TimePicker value={time} onValueChange={setTime} label="Reminder Time"/>24-Hour Format
Section titled “24-Hour Format”TIME (24H)
14:30
<TimePicker value={time} onValueChange={setTime} format="24h"/>Minute Step
Section titled “Minute Step”Set the minute increment (e.g., 5, 10, 15 minutes).
APPOINTMENT (15-MIN SLOTS)
10:15 AM
<TimePicker value={time} onValueChange={setTime} minuteStep={15} label="Appointment"/>Wheel Interface
Section titled “Wheel Interface”The time picker uses a wheel-based selection for intuitive time picking.
Select Time
08
09
10
11
12
15
20
30
35
40
AM
PM
Disabled
Section titled “Disabled”TIME
9:30 AM
<TimePicker value={time} onValueChange={setTime} disabled/>API Reference
Section titled “API Reference”TimePicker Props
Section titled “TimePicker Props”| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | null | Required | Selected time |
onValueChange | (date: Date) => void | Required | Change handler |
format | '12h' | '24h' | '12h' | Time format |
minuteStep | number | 1 | Minute increment |
label | string | - | Label above picker |
placeholder | string | 'Select time' | Placeholder text |
disabled | boolean | false | Disabled state |
formatTime | (date: Date) => string | - | Custom format function |
style | ViewStyle | - | Custom styles |
accessibilityLabel | string | - | Screen reader label |