Date input with custom calendar icon button and tooltip. Replaces the native browser calendar indicator with a styled Phosphor icon.
| Name | Type | Default | Description |
|---|---|---|---|
| size | "default" | "sm" | "lg" | default | Size variant (matches Input sizes) |
| disabled | boolean | — | Disable input and picker button |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.input-background | var(--input-background) | Inherits from Input component | |
| Border | color.input | var(--input) | Inherits from Input component | |
| Calendar Icon | color.muted-foreground | var(--muted-foreground) | Calendar icon color (default state) | |
| Calendar Icon (hover) | color.foreground | var(--foreground) | Calendar icon color on hover | |
| Hover Background | color.accent | var(--accent) | Background on icon button hover | |
| Focus Ring | color.ring | var(--ring) | Focus indicator on calendar button |
Available size variants matching the Input component.
<DateInput size="sm" /> <DateInput /> <DateInput size="lg" />
Interactive and disabled states.
<DateInput /> <DateInput disabled />