TimePicker — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Base UI.

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download time-picker -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { TimePicker } from "@/components/ui/time-picker";
<div className="h-[300px] w-[200px]">
  <TimePicker minuteInterval={15} secondInterval={1} manualInput={false} disabled={false} format="hh:mm" />
</div>;

Behavior

Guard browser-only APIs for SSR.
Use accessible disabled option semantics.

Examples

Main

import { TimePicker } from "@/components/ui/time-picker";
<div className="h-[300px] w-[200px]">
  <TimePicker minuteInterval={15} secondInterval={1} manualInput={false} />
</div>;

With Seconds And Custom Format

import { TimePicker } from "@/components/ui/time-picker";
<div className="h-[300px] w-[200px]">
  <TimePicker minuteInterval={15} secondInterval={10} manualInput={false} format="hh:mm:ss A" />
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

Prop	Type	Default
`advancedKeyboard`	`boolean`	`—`
`amText`	`string`	`—`
`apmLabel`	`string`	`—`
`autoComplete`	`string`	`—`
`autoScroll`	`boolean`	`—`
`blurDelay`	`number \| string`	`—`
`closeOnComplete`	`boolean`	`—`
`containerId`	`string`	`—`
`defaultValue`	`TimePickerValueInput`	`—`
`disabled`	`boolean`	`—`
`dropDirection`	`"up" \| "down"`	`—`
`dropOffsetHeight`	`number \| string`	`—`
`format`	`string`	`—`
`hideDisabledHours`	`boolean`	`—`
`hideDisabledItems`	`boolean`	`—`
`hideDisabledMinutes`	`boolean`	`—`
`hideDisabledSeconds`	`boolean`	`—`
`hideDropdown`	`boolean`	`—`
`hourLabel`	`string`	`—`
`hourRange`	`TimePickerRangeValue[]`	`—`
`inputClass`	`string`	`—`
`inputWidth`	`string`	`—`
`lazy`	`boolean`	`—`
`manualInput`	`boolean`	`—`
`manualInputTimeout`	`number \| string`	`—`
`minuteInterval`	`number \| string`	`—`
`minuteLabel`	`string`	`—`
`minuteRange`	`TimePickerRangeValue[]`	`—`
`name`	`string`	`—`
`onBlur`	`() => void`	`—`
`onChange`	`(value: TimePickerValueInput) => void`	`—`
`onClose`	`() => void`	`—`
`onError`	`(error: Error) => void`	`—`
`onFocus`	`() => void`	`—`
`onOpen`	`() => void`	`—`
`onValueChange`	`(value: TimePickerValueInput) => void`	`—`
`placeholder`	`string`	`—`
`pmText`	`string`	`—`
`secondInterval`	`number \| string`	`—`
`secondLabel`	`string`	`—`
`secondRange`	`TimePickerRangeValue[]`	`—`
`tabIndex`	`number \| string`	`—`
`value`	`TimePickerValueInput`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.