Time Picker

Hour, minute and optional AM/PM selects that produce an "HH:mm" time.

Stable

Web

iOS

Android

@advui/core

Source

24-hour

Preview

Code

Start time

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { Field, TimePicker } from '@advui/core'

<Field label="Start time">
  <TimePicker value={time} onValueChange={setTime} hourCycle={12} minuteStep={15} />
</Field>

Examples

12-hour, 15-minute steps

Preview

Code

Pickup

Value: 14:45

API reference

TimePicker

Prop	Type	Default	Description
`value`	`string \| null`	—	24-hour `"HH:mm"`, whatever `hourCycle` shows.
`defaultValue`	`string \| null`	—	Starting `value` when uncontrolled.
`onValueChange`	`(value: string \| null) => void`	—	Called once an hour and a minute are both picked, and on later changes.
`hourCycle`	`12 \| 24`	`24`	12 adds an AM/PM select.
`minuteStep`	`number`	`5`	Minutes between options.
`min`	`string \| null`	—	Earliest `"HH:mm"` that can be picked. Earlier options are disabled, and a pick that leaves the time earlier moves it to the first one allowed.
`max`	`string \| null`	—	Latest `"HH:mm"` that can be picked, on the same day as `min` (no ranges past midnight).
`id`	`string`	—	Goes on the hour select, so a Field’s label targets it.
`hourLabel`	`string`	`'Hour'`	Accessible name of the hour select.
`minuteLabel`	`string`	`'Minute'`	Accessible name of the minute select.
`periodLabel`	`string`	`'AM or PM'`	Accessible name of the AM / PM select (12-hour clock only).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	As Select.
`invalid`	`boolean`	`false`	Error styling and `aria-invalid`.
`disabled`	`boolean`	`false`	Not focusable or editable.

Accessibility

A group of Selects, each with its own name (Hour, Minute, AM or PM). Name the group with aria-label when it is not in a Field.
Each Select is a listbox on web and an accessible bottom sheet on phones.

Platform notes

iOS

Each part opens as a bottom sheet.

Android

Each part opens as a bottom sheet; the back button closes it.

Since v0.5.0Last updated Nov 2, 2026Edit this page on GitHub

PreviousTextarea

NextApp Shell