ComponentsForms
TimePicker
Compact time selection for cutoff times, shifts, and scheduling fields
TimePicker stores a time-only value as an HH:mm string. Use it when the field should not invent a date: cutoff time, pickup slot, shift start, or business hours.
Import
import { TimePicker } from '@nim-ui/components';Basic Usage
Code
<TimePicker defaultValue="17:00" step={15} name="cutoffTime" />12 Hour Labels
<TimePicker hourCycle="12" step={30} />Props
| Name | Type | Default | Description |
|---|---|---|---|
value | string | - | Controlled HH:mm value |
defaultValue | string | - | Uncontrolled initial HH:mm value |
onChange | (time: string | undefined) => void | - | Called when a time is selected |
step | number | 15 | Minute interval between options |
hourCycle | '12' | '24' | '24' | Display format for option labels |
min / max | string | - | Inclusive HH:mm bounds |
name | string | - | Renders a hidden input with the selected HH:mm value |