TimePicker

The machine manages parsing, the floating panel, and keyboard navigation across time columns.

import { TimePicker } from '@manti-ui/react';

export default function TimePickerBasic() {
  return <TimePicker label="Pickup time" variant="primary" defaultValue="12:30" />;
}

Sizes

size sets the control's height, padding, and type, and the portalled panel follows it down to the hour and minute cells.

API

Prop	Type	Default	Description
`label`	`ReactNode`	—	Optional field label rendered above the control.
`variant`	`MantiVariant`	`'primary'`	Selection-highlight variant for the active cells.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size. The portalled panel follows it, down to the hour and minute cells.
`defaultValue`	`string`	—	Initial value as "HH:mm" (24-hour).
`onValueChange`	`(value: string) => void`	—	Called whenever the value changes; emits the formatted time string.
`placement`	`Placement`	`'bottom-start'`	Placement of the panel relative to the control.
`disabled`	`boolean`	—	Disable the control.
`readOnly`	`boolean`	—	Make the control read-only.
`name`	`string`	—	Form field name.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="time-picker"][data-part="root"]`	The outer wrapper that owns the variant.
`label`	`[data-scope="time-picker"][data-part="label"]`	The optional field label.
`control`	`[data-scope="time-picker"][data-part="control"]`	The input plus trigger row.
`input`	`[data-scope="time-picker"][data-part="input"]`	The text input that holds the formatted time.
`trigger`	`[data-scope="time-picker"][data-part="trigger"]`	The button that opens the panel.
`positioner`	`[data-scope="time-picker"][data-part="positioner"]`	The floating wrapper that positions the panel.
`content`	`[data-scope="time-picker"][data-part="content"]`	The panel holding the hour/minute/period columns.
`column`	`[data-scope="time-picker"][data-part="column"]`	A scrollable column of cells for one unit.
`cell`	`[data-scope="time-picker"][data-part="cell"]`	A selectable hour, minute, or period option.

Tokens

Token	Controls
`--manti-time-picker-height`	height
`--manti-time-picker-padding-x`	padding x
`--manti-time-picker-column-height`	column height
`--manti-time-picker-content-padding`	content padding
`--manti-time-picker-cell-min-width`	cell min width
`--manti-time-picker-cell-padding-y`	cell padding y
`--manti-time-picker-cell-padding-x`	cell padding x
`--manti-time-picker-cell-radius`	cell radius
`--manti-time-picker-cell-font-size`	cell font size

Last updated 13 September 2026