TimePicker

A keyboard-accessible 24-hour time field with free-form parsing and stepped options.

Default

Type a 24-hour time, or pick from the Hour and Minute columns -- clicking an hour commits it and keeps the panel open for the minute; clicking a minute commits and closes.

Start time

tsx

<TimePicker label="Start time" defaultValue="09:30" />

Installation

tsx

import { TimePicker } from "madagent";

Controlled

The selected canonical value is 09:30.

tsx

const [value, setValue] = useState("09:30");

<TimePicker value={value} onChange={setValue} />

Sizes

tsx

<TimePicker size="sm" defaultValue="08:00" />
<TimePicker size="md" defaultValue="09:30" />
<TimePicker size="lg" defaultValue="11:00" />

Step and constraints

Minute options step by 15 within business hours. min/max filter both columns coherently: an hour is disabled unless at least one of its minutes is allowed, so 08 and 18 are unavailable while 09 only allows :00/:15/:30/:45 and 17 only allows :00.

Appointment time

tsx

<TimePicker min="09:00" max="17:00" step={15} />

Disabled

tsx

<TimePicker value="14:00" disabled />

API Reference

Prop	Type	Default	Description
`value`	`string`	-	Controlled HH:mm value
`defaultValue`	`string`	-	Initial uncontrolled HH:mm value
`onChange`	`(value: string) => void`	-	Called with a canonical HH:mm value
`step`	`number`	`30`	Minutes between generated options
`min`	`string`	-	Earliest selectable HH:mm value
`max`	`string`	-	Latest selectable HH:mm value
`size`	`"sm""md""lg"`	`"md"`	Field size
`label`	`string`	-	Visible field label
`disabled`	`boolean`	`false`	Disables typing and selection

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

وقت البدء

Usage

tsx

<TimePicker label="وقت البدء" defaultValue="09:30" />