## TimePicker
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.
Default to the HTML snippet — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler.
Surfaces: editor, dashboard, settings.
Props:
- value: Dayjs, default —. Selected time
- size: 'small' | 'middle' | 'large', default 'middle'. Field height: 24 / 32 / 40
- status: 'error' | 'warning', default —. Validation state — tints the border
- disabled: boolean, default false. Non-interactive, greyed field
- format: string, default HH:mm:ss. Display/parse format (HH:mm · HH:mm:ss · h:mm a)
- use12Hours: boolean, default false. 12-hour clock with AM/PM
- allowClear: boolean, default true. Show the clear (×) affordance
- minuteStep: number, default 1. Granularity of the minute column
- onChange: (time) => void, default —. Fires with the new time
Tokens: colorPrimary, borderRadius, controlHeight, colorBorder, DatePicker.cellHoverBg, DatePicker.borderRadius.
Use when: 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).