Components

DhDateInput

Native <input type="date"> with calendar icon, min/max as ISO string or Date, and the input-family label/helper/error pattern.

Open in Figma

Sizes

<DhDateInput bind:value={bday} size="sm" label="Small" />
<DhDateInput bind:value={bday} size="md" label="Medium (default)" />
<DhDateInput bind:value={bday} size="lg" label="Large" />

Helper vs error

<DhDateInput
  bind:value={date}
  label="Event date"
  helperText="Must be in 2024 or later."
  errorText={dateError}
/>

Min / max with Date object

Pick a date within the next three months.

<DhDateInput
  bind:value={meeting}
  label="Meeting (next 90 days)"
  min={today}
  max={threeMonthsFromNow}
  helperText="Pick a date within the next three months."
/>

States

<DhDateInput value="2026-06-15" label="Filled" />
<DhDateInput label="Readonly" readonly bind:value={fixed} />
<DhDateInput label="Disabled" disabled />
<DhDateInput label="Error" value="2020-01-01" errorText="Out of range." />
<DhDateInput label="No start icon" showStartIcon={false} />