TimePicker

A time field that opens a scrolling list of times at a fixed minute step, in 12- or 24-hour format.

When to use

• Scheduling a time of day: a snooze, a scheduled send, a nightly backup.
• When times snap to a step (5, 10, 15, 30 minutes).
• For free numeric entry use NumberField; for a date use DatePicker.

Usage

import { TimePicker } from "@/components/iris/time-picker/time-picker";
function LaterToday() {
  const [time, setTime] = React.useState("18:00");
  return h(TimePicker, { label: "Later today at", value: time, onChange: setTime, minuteStep: 15 });
}

Props

Prop	Type	Default	Description
label	string	required	Visible label; also names the listbox.
value / defaultValue	string ("HH:mm", 24h)	– / "09:00"	Controlled or initial time.
onChange	(value: string) => void	–	Called with the chosen HH:mm string.
minuteStep	1 | 5 | 10 | 15 | 30	15	Spacing of the options.
format	"12h" | "24h"	"12h"	Display format; values are always 24h strings.
placeholder	string	"Select a time"	Shown when the value is empty.
description	string	–	Helper copy under the field.
disabled	boolean	false	Disables the trigger.
className	string	–	Extra class on the root.

Notes

• The trigger is a button with aria-haspopup="listbox"; Enter/Space/ArrowDown open the menu centred on the current time, arrows move the highlight, Enter chooses, Escape closes. Only the menu scrolls, never the page.
• The menu renders inline below the trigger, up to 250px tall; a pointer down outside closes it.
• The shown time rolls up or down with the change; reduced motion crossfades.
• Reads --surface, --hover, --line, --line-strong, --ink-3, --shadow-floating, --radius-control, --radius-panel.