# TimePicker
> Generated from time-picker.contract.json — do not edit by hand.

Pick a time of day from scrolling hour/minute/second columns — schedules, reminders, durations — rendered through the shared TimePicker.

Tier: **composite-antd**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | Dayjs | `—` | Selected time |
| `size` | 'small' | 'middle' | 'large' | `'middle'` | Field height: 24 / 32 / 40 |
| `status` | 'error' | 'warning' | `—` | Validation state — tints the border |
| `disabled` | boolean | `false` | Non-interactive, greyed field |
| `format` | string | `HH:mm:ss` | Display/parse format (HH:mm · HH:mm:ss · h:mm a) |
| `use12Hours` | boolean | `false` | 12-hour clock with AM/PM |
| `allowClear` | boolean | `true` | Show the clear (×) affordance |
| `minuteStep` | number | `1` | Granularity of the minute column |
| `onChange` | (time) => void | `—` | Fires with the new time |

## Visual standard (measured)
- Field: height 32 · radius 8 · 1px #E3E3E3 border
- Sizes: small 24 · default 32 · large 40 (via size)
- Status: error/warning tints the border (#FF5A7A error)
- Selected cell: brand #6A1EBB
- Hover cell: #F7F7F7 (gray-20)
- Format: HH:mm · HH:mm:ss · h:mm a (use12Hours)
- Range: TimePicker.RangePicker — start → end
- Placeholder: #8A8A8A

## When to use
- **TimePicker** — a time of day on its own — a reminder, a daily schedule slot
- **DatePicker showTime** — a date AND a time together — a precise timestamp
- **Select** — a small fixed set of times (e.g. 15-min slots) — a list beats scrolling

Match format to the precision you need — HH:mm hides seconds. Use minuteStep to snap to sensible increments rather than every minute. Times use Day.js.