Time Picker

A field that matches Input, opening a split readout with snap columns and a sliding AM/PM control. Scroll, tap, or type digits. The value is always 24-hour `"HH:mm"`.

Installation

npx stepwise-ui add time-picker

Default

Click a number or type into the underlined hour and minute. Arrow keys step; scroll or drag the wheels.

Start time

import { TimePicker } from '@/components/stepwise/time-picker'

const [time, setTime] = useState('09:30')

// value is always 24h "HH:mm", whatever the display format
<TimePicker label="Start time" value={time} onChange={setTime} />

24-hour

Drop AM/PM with `use12Hour={false}` and set the minute increment with `step`.

Ends at (24h, 15m steps)

Props

PropTypeDescription

value

string

24-hour "HH:mm".

onChange

(value: string) => void

Fires with 24-hour "HH:mm".

label

string

Label above the field.

placeholder

string

Shown when no time is set. Default "Select time".

use12Hour

boolean

12-hour display with AM/PM. Default true.

step

number

Minute increment. Default 5.

disabled

boolean

Disables the field.

className

string

Merged onto the outer wrapper.

onOpenChange

(open: boolean) => void

Fires when the panel opens or closes.

Time Picker

A field that matches Input, opening a split readout with snap columns and a sliding AM/PM control. Scroll, tap, or type digits. The value is always 24-hour "HH:mm".

Installation

Default

Click a number or type into the underlined hour and minute. Arrow keys step; scroll or drag the wheels.

24-hour

Drop AM/PM with use12Hour={false} and set the minute increment with step.

Props

A field that matches Input, opening a split readout with snap columns and a sliding AM/PM control. Scroll, tap, or type digits. The value is always 24-hour `"HH:mm"`.

Drop AM/PM with `use12Hour={false}` and set the minute increment with `step`.