Time picker

In FORMA

• Liegt in kit/arc/time-picker und ist über @/forma/arc/time-picker/time-picker erreichbar.
• Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

• Picking a time of day at a fixed interval, such as meetings or reminders.
• Fields that show 12-hour times but store 24-hour HH:mm values.

When not to use

• Use date-picker for dates, pairing the two for a timestamp.
• Use time-dial for a more tactile, showcase time selection.
• Use select when only a few named times are allowed.

Usage

import { TimePicker } from "@/forma/arc/time-picker/time-picker";

export function MeetingTime() {
  const [time, setTime] = useState("14:30");
  return <TimePicker label="Start time" value={time} onChange={setTime} minuteStep={30} />;
}

API reference

TimePicker

A trigger with a scrolling listbox of times at a fixed minute step; the shown time rolls like a clock.

Keyboard interactions

Accessibility

• Trigger has aria-haspopup="listbox", aria-expanded, aria-controls, and aria-labelledby combining the label and a hidden value.
• The menu is role="listbox" with role="option" items carrying aria-selected.
• The list opens centered on the selected time and scrolls only itself, never the page.

Motion

• A later time rises in from below and an earlier one drops from above with a soft blur; the menu springs in from slightly above.
• Reduced motion crossfades the value and opens the menu with opacity only.

Responsive behavior

• The list spans the field width and caps at 250px, scrolling itself with contained overscroll.
• It closes on any pointerdown outside the field.

Performance

• All options at the chosen step render at once; minuteStep 1 means 1,440 rows, so prefer 5 or more.

Notes for AI

• Use for picking a time of day at a fixed interval. Pair with date-picker for a full timestamp.
• Controlled or uncontrolled; values are always 24-hour "HH:mm" strings regardless of display format.

Related

• Date picker: Choose a date without losing context.
• Calendar: Browse dates in a clear, compact month view.
• Select: A compact choice field with a keyboard friendly menu.
• Time dial: Spin a dial to pick an hour and see which team cities are at work.

Also in pickers

• Date range picker: A range picker that grows from its trigger into two months with presets and a stretching range highlight.
• Color picker: A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout.
• Emoji picker: A full emoji picker with instant search, scroll-synced categories, skin tones, recently used emoji, and a virtualized, keyboard-navigable grid.

Guidance for AI tools

Time picker: Choose a time with sensible keyboard behavior. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt