Time picker

Choose an hour and minute in one view.

Preview

Default

Design guidance

Time picker is the reusable hour/minute view. Time input adds text entry and a trailing popover through this same owner. Values are strict 24-hour HH:mm strings; null starts empty. Both units must be chosen before an empty selection emits. The view does not attach a date or timezone.

Installation

Install

No source.

Download example files — JSX recipes, demo styles and any sample assets. Install the component first.

Basic usage

1234567import { useState } from "react";
import { TimePicker } from "@/components/ui/time-picker";

export function MeetingTime() {
  const [time, setTime] = useState<string | null>("09:00");
  return <TimePicker value={time} minuteStep={5} onValueChange={setTime} />;
}

Structures

TimePicker is one public component that renders separate hour and minute RadioGroups. It does not expose those columns as compound parts.

Examples

Controlled value

Keep the selected time in caller state and handle each complete update.

Bounds and minute step

Keep hour/minute combinations within 09:30–17:00 and use quarter-hour steps. Each selected value has an SVG checkmark; hover and focus use the shared highlight.

Partial and invalid configuration

Start with no committed value, choose either unit first, or show when the minute step makes the configuration unavailable.

Read only and disabled

Both states keep the current time visible while preventing changes.

API reference

Time picker properties
Prop	Type	Default	Description
`value / defaultValue`	`string \| null`		Controlled or initial HH:mm time. Default null. External changes replace the local unit draft.
`onValueChange`	`(value: string) => void`		A complete allowed time. Partial or incompatible unit choices do not emit.
`min / max`	`string`		Inclusive same-day HH:mm bounds. Reversed or malformed bounds are unavailable.
`minuteStep`	`number`	`1`	Positive integer divisor of 60. A five-minute list contains 00, 05, 10 and so on.
`required`	`boolean`	`false`	Shared value constraint for compositions. The picker itself emits only complete values.
`disabled / readOnly`	`boolean`	`false`	Prevent unit changes while retaining the visible selection.
`className / ref / native root props`	`string / Ref<HTMLDivElement> / HTML attributes`		Root layout escape, ref and native HTML attributes.
`isValidTimeOnly`	`(value: unknown) => value is string`		Exported strict HH:mm shape/range helper. Caller-specific bounds and scheduling policy remain separate.

Each column uses the RadioGroup keyboard contract. Arrow keys move within it; Tab moves between columns. A value-incompatible unit remains a recoverable partial draft. The picker does not silently choose midnight or attach a time to a calendar date.

Hours

Minutes