Time picker

@summonware/ui · time-picker · P2 · Forms

Usage

A scrollable list of times at a fixed increment, not a hour/minute dial or two separate selects — the fastest way to pick from a bounded, evenly-spaced set of options, which is what booking/scheduling slots actually are.
import { TimePicker } from '@summonware/ui';

Best practices

DoSet `step` to match real granularity — 15 or 30 minutes for appointments, 60 for something coarser. A 1-minute step turns this into an unusable 1,440-row list.
Don'tPair this with a picker for durations or elapsed time — that is a different control (a duration input), not a point in the day.

Examples

Common configurations, variations and states.

Basic time picker

Half-hour increments — the common case for booking/scheduling.

Reference variants

0 of 1 labels from the reference are demonstrated above.
Preview