Components

TimePicker

An hour/minute wheel — locale-aware column order, minute stepping, 24-hour values.

Available since@crisp-ui-kit/crisp@0.11.0

An hour and minute wheel driven by seed-design's headless engine, rendered with crisp's own WheelPicker so the pixels are the ones already measured for it. The value is always 24-hour — { hour: 0–23, minute: 0–59 } — regardless of how the wheels read.

Installation

npm install @crisp-ui-kit/crisp

Props

Prop

Type

Examples

Minute step

minuteStep accepts 1 | 5 | 10 | 15 | 30 and rounds an off-step starting value to the nearest valid one, so { minute: 20 } at a step of 15 opens on 15.

Locale

locale decides the column order: en-US trails the period (9:30 AM), while ko-KR and ja-JP lead with it. crisp defaults to en-US; the engine's own default is ko-KR, which is overridden here so it matches every other crisp component. A locale you pass still wins.

The wheels are 12-hour in every locale. de-DE and fr-FR resolve to hourCycle: h23 in Intl, but the engine renders a 12-hour wheel plus a period column regardless. The value is unaffected — it is the display that has no 24-hour form today.

On this page