For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Time picker

Verified

Hours and minutes as number fields, with an AM/PM list in 12-hour mode.

When to use

Use when: Choosing a time of day. Pair it with Date Picker for a date and time.
Avoid when: A duration; use Number Field.

Installation

bunx shelf add time-picker

The source lands in src/components/ui/time-picker.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import { TimePicker } from "@/components/ui/time-picker";

<TimePicker aria-label="Start time" defaultValue="09:30" onValueChange={setTime} />

Built on

Packages: @stylexjs/stylex
Shelf items: foundations, Number Field, Select, utils
Figma: Optional native Figma library. See Designers.

Verified

Size: 1.1 kB gzipped on its own, 51 kB with the Shelf items and packages it builds on. JS and CSS in a production build, without React.
Accessibility: Axe passes on 3 stories
Behavior: 3 interaction tests in Storybook
React Compiler: Compiles with React Compiler
React Doctor: React Doctor finds nothing