DatePicker
Markdown for agentsNative date field with an ISO-string contract, min/max passthrough and an optional clear button.
npx slipstream-ui@latest add date-pickerISO date field
Stored as YYYY-MM-DD
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | ISO date (YYYY-MM-DD), controlled. |
| defaultValue | string | — | ISO date, initial value. |
| onValueChange | (value: string) => void | — | Fired with the ISO string; '' when cleared. |
| clearable | boolean | false | Shows a clear button once a value exists. |
| …InputProps | InputProps | — | min, max, name, required, disabled all pass through. |
Accessibility
- Renders input[type=date] so OS pickers, keyboard editing and locale formatting apply.
- Always label the field (FormField or aria-label).
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.