Fluxo UIFluxo UIv0.4.1

Time Picker

A configurable time picker with 12/24 hour modes, seconds, custom step increments, and an inline variant.

Basic Usage

Default Time Picker

24-hour format by default. Type directly or pick from the dropdown.

Controlled (09:30)
Uncontrolled
Empty with placeholder
Disabled
import { TimePicker } from 'fluxo-ui';

const [time, setTime] = useState<string | null>('09:30');

<TimePicker value={time} onChange={(v) => setTime(v as string | null)} />

<TimePicker defaultValue="14:45" />

<TimePicker placeholder="Meeting time" />

Formats

12/24 Hour & Seconds

Toggle between 12-hour and 24-hour clocks, and optionally include seconds.

24-hour (default)
12-hour
24-hour with seconds
12-hour with seconds
<TimePicker defaultValue="14:30" />

<TimePicker defaultValue="14:30" format12 />

<TimePicker defaultValue="14:30:45" showSeconds />

<TimePicker defaultValue="14:30:45" format12 showSeconds />

Step Increments

Step Increments

Limit the options in each column with hourStep, minuteStep, and secondStep. Great for appointment slots.

15-minute slots
5-minute slots
2-hour slots, 10-second precision
<TimePicker defaultValue="09:00" minuteStep={15} />

<TimePicker defaultValue="09:00" minuteStep={5} />

<TimePicker defaultValue="09:00:00" showSeconds secondStep={10} />

Sizes

Sizes

Three trigger sizes for different form densities.

sm
md
lg
<TimePicker size="sm" defaultValue="09:30" />
<TimePicker size="md" defaultValue="09:30" />
<TimePicker size="lg" defaultValue="09:30" />

Confirm & Inline

Confirm & Inline

Require explicit confirmation before committing, or render the panel inline without a trigger.

Confirm button (no auto-close)
Now + Confirm (returns Date)
Value: —
Inline variant
<TimePicker defaultValue="12:00" showConfirm autoClose={false} />

<TimePicker defaultValue="12:00" showNow showConfirm />

<TimePicker variant="inline" defaultValue="12:00" format12 />

Import

import { TimePicker } from 'fluxo-ui';
import type { TimePickerProps, TimePickerValue } from 'fluxo-ui';

Props

value
Date | string | TimeValue | null

Controlled time value. Accepts Date, string (HH:mm[:ss]), or object.

defaultValue
Date | string | TimeValue | null

Initial value for uncontrolled usage.

format12
boolean"false"

Use 12-hour clock with AM/PM column.

showSeconds
boolean"false"

Include a seconds column.

hourStep
number"1"

Step between available hour values.

minuteStep
number"1"

Step between available minute values.

secondStep
number"1"

Step between available second values.

valueType
'date' | 'string' | 'object'"'string'"

Shape of the value passed to onChange.

size
'sm' | 'md' | 'lg'"'md'"

Trigger size.

variant
'input' | 'inline'"'input'"

Trigger style, or render the panel inline.

disabled
boolean"false"

Disable interaction.

readOnly
boolean"false"

Display-only mode.

clearable
boolean"true"

Show a clear button when a value is set.

placeholder
string"'Select time'"

Placeholder shown when empty.

showNow
boolean"true"

Show the Now shortcut button.

showConfirm
boolean"false"

Require an explicit OK click to commit.

autoClose
boolean

Close the popover immediately on selection. Defaults to the opposite of showConfirm.

onChange
(value: Date | string | TimeValue | null) => void

Called when the time changes.

onOpenChange
(open: boolean) => void

Called when the popover opens or closes.

Features

12/24 Hour

Full support for 12-hour clocks with AM/PM column or straight 24-hour mode.

Step Increments

Limit minute or second columns to appointment-friendly increments like 5, 15, or 30.

Flexible Values

Accepts Date objects, HH:mm strings, or plain time objects and emits the same.

Inline Or Popover

Render as a compact input with a portal popover, or inline directly in the page.