Components / Date Picker
Date Picker
Custom calendar dropdown with design-system tokens. Follows cg-input/cg-select styling.
forms v0.1.0
Playground
Examples
Basic
<cg-date-picker label="Start date" placeholder="Pick a date" style="max-width: 280px;"></cg-date-picker>With value
<cg-date-picker label="Birthday" value="2000-06-15" style="max-width: 280px;"></cg-date-picker>States
<cg-stack gap="sm" style="max-width: 280px;"><cg-date-picker label="Error" error helper="Date is required"></cg-date-picker><cg-date-picker label="Success" success value="2026-04-06" helper="Date confirmed"></cg-date-picker><cg-date-picker label="Disabled" disabled></cg-date-picker></cg-stack>Import
import { CgDatePicker } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-date-picker';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text above trigger |
value | string | — | Date value (YYYY-MM-DD) |
placeholder | string | "Select date" | Placeholder text |
helper | string | — | Helper text below picker |
min | string | — | Min date (YYYY-MM-DD) |
max | string | — | Max date (YYYY-MM-DD) |
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 |
Events
| Event | Detail | Description |
|---|---|---|
cg-change | {value: string} | When a date is selected |