Time picker
Choose a time with sensible keyboard behavior.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- 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.
- 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.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { TimePicker } from 'animui/time-picker';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { TimePicker } from "animui/time-picker"; export function MeetingTime() { const [time, setTime] = useState("14:30"); return <TimePicker label="Start time" value={time} onChange={setTime} minuteStep={30} />;}TimePicker
A trigger with a scrolling listbox of times at a fixed minute step; the shown time rolls like a clock.
PropTypeDefaultDescription
labelRequiredstring–Visible label.valuestring–Controlled time as "HH:mm" (24-hour).defaultValuestring"09:00"Initial time when uncontrolled.onChange(value: string) => void–Called with the new "HH:mm" value.descriptionstring–Helper copy under the field.placeholderstring"Select a time"Shown when the value is empty.minuteStep1 | 5 | 10 | 15 | 3015Spacing between options.format"12h" | "24h""12h"Display format. Values stay 24-hour.disabledbooleanfalseDisables the trigger.classNamestring–Added to the root.- EnterorSpace
- Opens the list, or selects the active time when open.
- ArrowDownorArrowUp
- Opens the list, then moves through times, wrapping.
- Escape
- Closes the list.
- 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.
- 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.
- The list spans the field width and caps at 250px, scrolling itself with contained overscroll.
- It closes on any pointerdown outside the field.
- All options at the chosen step render at once; minuteStep 1 means 1,440 rows, so prefer 5 or more.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.