DhDateInput

Native <input type="date"> with calendar icon, min/max as ISO string or Date, and the input-family floating-label / supporting-text / isError / isSuccess pattern.

Open in Figma

Floating label     Date of birth 
 <DhDateInput bind:value={bday} label="Date of birth" />

Validation states

Event date

Date must be in 2024 or later.

<DhDateInput
  bind:value={date}
  label="Event date"
  isError={Boolean(dateError)}
  supportingText={dateError || 'Must be in 2024 or later.'}
/>

Min / max with Date object

Meeting (next 90 days)

Pick a date within the next three months.

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

States     Empty 
  Filled 
  Readonly 
  Disabled 
  No start icon 
 <DhDateInput value="2026-06-15" label="Filled" />
<DhDateInput label="Readonly" readonly bind:value={fixed} />
<DhDateInput label="Disabled" disabled />
<DhDateInput label="No start icon" showStartIcon={false} />