Time Picker

Time picker with hour/minute scrollable columns and optional AM/PM toggle.

forms v0.5.0

Playground

24h format

<cg-time-picker label="Start time" placeholder="Pick a time" style="max-width: 250px;"></cg-time-picker>

12h format

<cg-time-picker label="Meeting" use12h value="14:30" style="max-width: 250px;"></cg-time-picker>

15-min steps

<cg-time-picker label="Appointment" step="15" style="max-width: 250px;"></cg-time-picker>

import { CgTimePicker } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-time-picker';

Per-component imports ship only that component (~8 kB gzip).

Prop	Type	Default	Description
`label`	string	—	Label text above trigger
`value`	string	—	Time value (HH:MM, 24h format)
`placeholder`	string	"Select time"	Placeholder text
`helper`	string	—	Helper text below picker
`step`	number	5	Minute step interval (1, 5, 10, 15, 30)
`use12h`	boolean	false	12-hour format with AM/PM
`size`	"md" \| "lg"	"md"	Trigger size — md (48px), lg (56px)
`rounded`	"none" \| "sm" \| "md" \| "lg"	"lg"	Border radius — sm (8px), md (12px), lg (16px)
`error`	boolean	false	Error state
`success`	boolean	false	Success state
`disabled`	boolean	false	Disabled state

Event	Detail	Description
`cg-change`	{value: string}	When a time is selected