Date Picker
FormsA native date input styled to match the design system.
For many forms a styled native date input is all you need. It gives users the platform's own calendar picker, zero extra dependencies, and clean theming out of the box.
npx shadcn@latest add date-pickerBasic usage
A calendar icon marks the field, and value is reported as a YYYY-MM-DD string.
Preview
LiveDate: none
tsx
1const [value, setValue] = useState("")23<DatePicker value={value} onValueChange={setValue} />
Constraints
Pass native input props to limit the selectable range.
Preview
Livetsx
1<DatePicker min="2024-01-01" max="2026-12-31" />
API reference
All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.
| Prop | Type | Description |
|---|---|---|
| value | string | The controlled date in YYYY-MM-DD format. |
| onValueChange | (value: string) => void | Called when the date changes. |
| onChange | ChangeEventHandler<HTMLInputElement> | Native change event passthrough. |
| min | string | The earliest selectable date. |
| max | string | The latest selectable date. |
| disabled | boolean= false | Disables the input. |