Inputs
Time Picker
Scroll-based time picker with 12/24-hour modes, configurable step intervals, and optional seconds column.
24h with seconds
12h format
30 min steps
Installation
npx benflux-ui add time-pickerUsage
import { TimePicker, type TimeValue } from "@benflux-ui/react"
const [time, setTime] = useState<TimeValue | undefined>()
// 24h with seconds
<TimePicker value={time} onChange={setTime} showSecond />
// 12h format
<TimePicker value={time} onChange={setTime} use12Hours />
// Custom step intervals
<TimePicker value={time} onChange={setTime} minuteStep={15} secondStep={30} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | TimeValue | — | Controlled time value |
| onChange | (value: TimeValue | undefined) => void | — | Callback when time changes |
| use12Hours | boolean | false | Use 12-hour format with AM/PM selector |
| showSecond | boolean | false | Show the seconds column |
| hourStep | number | 1 | Step interval for hours |
| minuteStep | number | 1 | Step interval for minutes |
| secondStep | number | 1 | Step interval for seconds |
| placeholder | string | — | Placeholder text for the trigger button |
| disabled | boolean | false | Disable the picker |