Date Picker

Preview

<esa-date-picker label="Event date" help-text="Pick any day"></esa-date-picker>

Sizes

<esa-date-picker label="Extra small" size="xs"></esa-date-picker>
<esa-date-picker label="Small" size="sm"></esa-date-picker>
<esa-date-picker label="Medium" size="md"></esa-date-picker>
<esa-date-picker label="Large" size="lg"></esa-date-picker>

States

Constrain selectable days with min/max. Preset, required, error, and disabled states are attribute-driven.

<esa-date-picker label="Within 2026" min="2026-01-01" max="2026-12-31"></esa-date-picker>
<esa-date-picker label="Preset value" value="2026-06-03"></esa-date-picker>
<esa-date-picker label="Required" required></esa-date-picker>
<esa-date-picker label="Error" error-text="Date is required"></esa-date-picker>
<esa-date-picker label="Disabled" disabled value="2026-06-03"></esa-date-picker>

API

Events

Accessibility

• Renders a native <input type="date"> — the browser supplies the calendar and full keyboard handling.
• The input is labelled via aria-label (falls back to "Date" when no label is set).
• min/max map to native input bounds, blocking out-of-range selection.
• Form-associated via ElementInternals — value submits with the enclosing form.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.