Time picker

TimePicker is a TextInput-shaped trigger with a popover for hour/minute selection. Value is always exchanged as a HH:mm string in 24-hour format — display switches with use24Hour, but the underlying value stays normalized.

Use it for

• Time-of-day selection on forms (appointment slot, opening hours, alarm)
• Pair with DatePicker for date-and-time entry
• Recurring schedules where the hour/minute matters

Import

import { TimePicker } from '@brikdesigns/bds';

Variants

Default (12-hour AM/PM display)

import { useState } from 'react';

const [time, setTime] = useState('09:00');

<TimePicker
  label="Start time"
  value={time}
  onChange={setTime}
  placeholder="Pick a time"
/>

The displayed value is "9:00 AM" but time state holds "09:00".

24-hour display

<TimePicker
  label="Start time"
  value={time}
  onChange={setTime}
  use24Hour
/>

Now displays "09:00" / "21:30". The value exchange format is unchanged — it's always 24-hour HH:mm.

Minute step

minuteStep constrains selectable minutes. Use 5, 15, or 30 for slot-based scheduling.

<TimePicker
  label="Appointment slot"
  value={time}
  onChange={setTime}
  minuteStep={15}
/>

Sizes

sm, md (default), lg.

Error state

<TimePicker
  label="Open at"
  error="Open time must be before close time"
  value={time}
  onChange={setTime}
/>

When not to use

• Don't use TimePicker for date selection. Use DatePicker.
• Don't use TimePicker for duration entry. Duration ("30 minutes") is different semantically from time-of-day ("at 9:30 AM"). For durations, use a Select of preset values or two number inputs.
• Don't combine date + time into a custom component. Pair DatePicker + TimePicker side by side — that's the BDS pattern.

Accessibility

• The trigger is a real <input> — keyboard, focus, screen-reader behaviors match TextInput.
• Hour/minute selection in the popover uses arrow keys + type-to-find.
• Selected time announces via aria-live on the trigger.

API

Related

• DatePicker — pair for date-and-time
• TextInput — base trigger shape
• Storybook playground