Time Picker
A flexible, accessible time selection component for forms and scheduling interfaces.
TimePicker combines a time input with a keyboard-friendly list of available times. Use it for appointments, schedules, reminders and other time-only values.
Views and formats
The default view="input" renders an input that opens the picker on focus. Use view="picker" for an always-visible picker. Values are stored as HH:mm or HH:mm:ss strings, independent of the display format. The default displayMode="numeric" shows separate numeric columns for hours, minutes, and optional seconds. Use displayMode="time" to show combined values such as 10:00.
<TimePicker defaultValue="09:30" />
<TimePicker view="picker" defaultValue="14:00" format="12" seconds />
<TimePicker view="picker" defaultValue="10:00:30" seconds secondStep={15} />
<TimePicker view="picker" displayMode="time" defaultValue="10:00" />format="24" is the default. format="12" displays AM/PM while the emitted value remains normalized to 24-hour time.
Localization
TimePicker supports en, uk, de and fr. Set the global language through ConfigProvider; use the component-level locale prop when one picker needs a different language. The local prop takes precedence over the provider. Localization covers the placeholder, panel heading, clear action, column labels and AM/PM markers.
<ConfigProvider locale="uk">
<TimePicker />
</ConfigProvider>
<TimePicker locale="fr" view="picker" seconds />Every value, steps and constraints
Use step to generate combined time options in displayMode="time". In numeric mode, minuteStep controls the minute column and secondStep controls the optional seconds column. Set both to 1 to make every minute and second selectable instead of using presets. minTime and maxTime define inclusive limits with hour-and-minute precision; seconds in the boundary values are ignored.
<TimePicker label="Office hours" minTime="08:00" maxTime="18:00" step={30} onChange={(time) => console.log(time)} />
<TimePicker view="picker" seconds minuteStep={1} secondStep={1} minTime="08:15" maxTime="18:45" />The limits are applied to the numeric hour and minute options as disabled states and are also enforced when typing or selecting a value. minTime and maxTime are inclusive, so 08:15 and 18:45 are allowed in the example above.
Use onComplete to run application logic after the full time has been selected. In numeric mode it fires after the hour and minute columns have both been chosen; when seconds is enabled, it waits for the seconds column as well. In combined time mode and after valid manual input, it fires when the complete time option is committed.
<TimePicker
view="picker"
seconds
onComplete={(value) => submitAppointmentTime(value)}
/>States and slots
The component supports disabled, readOnly, loading, clearable and error states. prefix and suffix accept text or icons. fullWidth stretches the control to its container.
<TimePicker label="Timezone" defaultValue="10:00" suffix="UTC" clearable />
<TimePicker label="Start time" error="Select an available time." />
<TimePicker fullWidth loading />Controlled values
value makes the component controlled. defaultValue is used for uncontrolled forms. onChange receives a normalized time string or null after clearing.
const [time, setTime] = useState<string | null>('09:30');
<TimePicker
label="Meeting time"
value={time}
onChange={setTime}
name="meetingTime"
placeholder="Choose a meeting time"
/>When view="input", focusing the field opens the picker. A single valid selection closes the popover automatically. view="picker" renders the same panel permanently without an input trigger. readOnly keeps the current value and panel visible but prevents changes; disabled prevents interaction and loading marks the control as waiting.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | Time | Accessible name when no visible label is provided. |
className | string | — | Additional class name on the root element. |
view | input | picker | input | Input popover or always-visible picker. |
value / defaultValue | string | null | — | Time value in HH:mm or HH:mm:ss format. |
onChange | (value: string | null) => void | — | Called when a valid time is selected or cleared. |
onComplete | (value: string) => void | — | Called after all required time parts have been selected: hours and minutes, plus seconds when enabled. |
format | 12 | 24 | 24 | Display format; emitted values remain 24-hour. |
locale | en | uk | de | fr | ConfigProvider locale or en | Language for built-in labels and localized AM/PM markers. Overrides the provider value. |
seconds | boolean | false | Include seconds in values and labels. |
displayMode | numeric | time | numeric | Separate numeric columns or combined time options. |
minuteStep | number | value of step | Interval between minute values in numeric mode. Use 1 for every minute. |
secondStep | number | 1 | Interval between seconds in numeric mode. |
step | number | 30 | Option interval in minutes. |
minTime / maxTime | string | — | Inclusive selectable time boundaries. |
size | sm | default | lg | default | Control density. |
label / description / error | string | — | Form labels and supporting validation text. |
prefix / suffix | ReactNode | — | Content rendered before or after the input. |
clearable | boolean | false | Shows a clear action when a value exists. |
fullWidth | boolean | false | Fills the available width. |
disabled | boolean | false | Disables interaction. |
readOnly | boolean | false | Prevents changes while retaining the current value. |
loading | boolean | false | Marks the control as waiting for data. |
name | string | — | Native form field name. |
placeholder | string | Select time | Input placeholder. |
Time strings are normalized to two-digit components. With seconds={false}, the emitted value is HH:mm; with seconds={true}, it is HH:mm:ss. Invalid typed values are not committed. minTime and maxTime compare only HH:mm, while secondStep controls which seconds are displayed and selected.
Accessibility
The input is labelled through label or aria-label, the options use listbox semantics, selected options expose aria-selected, and disabled/read-only states are reflected in native control attributes.