Time picker

Choose a time with sensible keyboard behavior.

timefield

Preview

Live · keyboard ready

Standup

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.

shadcn CLI

Also installs (1)

manicat-foundation

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "time-picker",
  "type": "registry:ui",
  "title": "Time picker",
  "description": "Choose a time with sensible keyboard behavior.",
  "categories": [
    "inputs"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json"
  ],
  "files": [
    {
      "path": "registry/components/time-picker/time-picker.tsx",
      "type": "registry:component",
      "target": "@components/manicat/time-picker/time-picker.tsx"
    },
    {
      "path": "registry/components/time-picker/time-picker.module.css",
      "type": "registry:component",
      "target": "@components/manicat/time-picker/time-picker.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/time-picker",
  "meta": {
    "tier": "free",
    "kind": "component",
    "docs": "https://manicat.viraza.net/components/time-picker",
    "markdown": "https://uiarc.dev/components/time-picker/markdown",
    "tags": [
      "time",
      "field"
    ]
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

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

export function TimePickerExample() {
  return <TimePicker label="Standup" defaultValue="09:30" />;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Standup time A time field with a sensible default.

Live · keyboard ready

Daily standup

standup-time-a-time-field-with-a-sensible-default-.tsxtsx

"use client";

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

export function TimePickerStandupExample() {
  return (
    <div className="w-full max-w-xs">
      <TimePicker label="Daily standup" defaultValue="09:30" />
    </div>
  );
}

Keyboard interactions

Keys	Action
Enter / Space	Opens the list, or selects the active time when open.
ArrowDown / ArrowUp	Opens the list, then moves through times, wrapping.
Escape	Closes the list.

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.