DatePicker
Luminous shells, inline helpers, and smooth focus cues transform native date inputs into premium scheduling controls.
Hero scheduling
Pair soft gradients with helper copy to guide customers through booking flows or onboarding journeys.
Flexible up to 24 hours before
Late check-out available
Local timezone applied
Start anytime today
<.datepicker label="Check-in" value="2025-04-18" helper="Flexible up to 24 hours before" />
<.datepicker label="Meeting" type={:datetime_local} helper="Local timezone applied" />
Size palette
Each size adjusts padding, typography, and icon treatments—perfect for responsive dashboards and mobile trays.
Micro UX
Validation and helper text stay polished, with animated focus states and graceful fallbacks.
Select within 2025
This field is required
Great for tight list rows
Temporal variety
Month and week pickers use the same shell, so alternative date granularities stay on-brand.
Props
Variants tune the shell styling while sizes align with typography tokens. Toggle icons or inject helper copy to personalise flows.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | :soft | :outline | :soft | Switch between glassy gradients or crisp outline styling. |
| size | :sm | :md | :lg | :md | Controls padding, radius, and typography scale. |
| icon | boolean | true | Toggle the calendar hero icon for ultra-compact layouts. |
| helper | string | nil | nil | Optional supporting copy displayed below the control. |
| error | string | nil | nil | Highlights validation state with rose accents and messaging. |