Time Picker

Hours and minutes selection — built as a data-lb-mode="time" mode of the Date Picker so it inherits the same dialog chrome, keyboard handling, and trigger styling. Two formats: 24-hour (default) and 12-hour with AM/PM column. Minute granularity is configurable via data-lb-time-step (1, 5, 10, 15, 30 are common). Both inline and input-with-popover variants ship.

a11y (built in): the input variant's trigger is a button with aria-haspopup="dialog" + aria-expanded, the panel is role="dialog" named Time picker, and Esc or a click outside closes it; the inline variant labels its own root instead (role="application" with the same aria-label). Hours, minutes and AM/PM are three separately labelled selects (aria-label Hours / Minutes / AM or PM, aria-haspopup="listbox" + aria-expanded on each trigger, role="listbox" with role="option" items) — Enter, Space or ↓ opens a column, Esc closes it. The : separator is aria-hidden decoration, data-lb-hint / data-lb-error text is tied to the trigger with aria-describedby, data-lb-disabled sets the native disabled, and every trigger carries a :focus-visible ring.

Usage: Add data-lb-mode="time" to any .lb-datepicker-field (input variant) or .lb-datepicker--inline wrapper. Optional data-lb-time-format="12h" for AM/PM display, data-lb-time-step="15" for minute granularity. Dispatches lb-datepicker-change with {mode: 'time', value: {hours, minutes}}.

Inline — 24-hour, 5-minute step

Default format. Hours 00–23, minutes in 5-minute increments. The picker stays expanded as part of the page — no popover.

Inline — 12-hour with AM/PM

Add data-lb-time-format="12h". Hours read 1–12 with a separate AM/PM column.

Input — popover trigger

Most common form-input pattern. Click the trigger to open the picker; selection updates the trigger text. Clock icon distinguishes it from a Date Picker at-a-glance.

Minute granularity — `data-lb-time-step`

Tune the minute step to match the use case: 1 for precision (alarms, timers), 15 or 30 for scheduling (calendars, bookings).

1-minute step (precision)

15-minute step (scheduling)

30-minute step (calendar)

Sizes

Same size scale as Date Picker.

States

In a form — date + time pair

Most "datetime" needs are met by placing a Date Picker next to a Time Picker. Each component owns its concern, the consumer combines values on submit.