Components
TimePicker
Controlled time-of-day input with 12/24-hour formats and optional seconds.
TimePicker captures a time of day. It is controlled by a TimeValue object
({ hours, minutes, seconds? }), and onChange returns the updated value.
Toggle 12-hour display with hour12, show a seconds field with showSeconds,
and add a label above the input.
Example
Preview
import { TimePicker, type TimeValue } from '@officina/ui';
import { useState } from 'react';
function ReminderTime() {
const [value, setValue] = useState<TimeValue>({ hours: 9, minutes: 30 });
return <TimePicker label="Remind me at" value={value} onChange={setValue} hour12 />;
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange* | (value: TimeValue) => void | — | Called with the new time on change. |
| value* | TimeValue | — | Selected time ({ hours, minutes, seconds? }). |
| disabled | boolean | — | Disable the control. |
| hour12 | boolean | — | Use 12-hour format with an AM/PM toggle. |
| label | string | Time | Visible field label. |
| showSeconds | boolean | — | Show a seconds field. |