DateInput

Use DateInput when the user already knows the date they need to enter — date of birth, start of an audit period, invoice date, reporting deadline.

Default

Controlled usage with value and onChange.

Date of birth

Day

Month

Year

import { useState } from 'react';
import { DateInput } from '@eekodigital/raster';
import type { DateValue } from '@eekodigital/raster';

function DateInputDemo() {
  const [value, setValue] = useState<DateValue>({ day: '', month: '', year: '' });
  return <DateInput label="Date of birth" value={value} onChange={setValue} />;
}

With hint text

Use hint to provide an example date format.

Date of auditFor example, 27 3 2025Error: Enter a valid date

Day

Month

Year

<DateInput
  label="Date of audit"
  hint="For example, 27 3 2025"
  value={value}
  onChange={setValue}
/>

Error state

Pass an error string to show a validation message and highlight the fields.

Date of auditFor example, 27 3 2025Error: Enter a valid date

Day

Month

Year

<DateInput
  label="Date of audit"
  hint="For example, 27 3 2025"
  error="Enter a valid date"
  defaultValue={{ day: '32', month: '13', year: '2025' }}
/>

Disabled

Date of birth

Day

Month

Year

<DateInput
  label="Date of birth"
  defaultValue={{ day: '12', month: '3', year: '1985' }}
  disabled
/>

Props

Prop	Type	Default	Description
label	string	—	Visible label above the fields.
hint	string	—	Optional hint text shown below the label.
error	string	—	Validation error message. Highlights the fields when present.
name	string	—	Base name used to derive field names (e.g. dob-day, dob-month, dob-year).
value	DateValue	—	Controlled value object with day, month, and year string fields.
defaultValue	DateValue	—	Uncontrolled initial value.
onChange	(value: DateValue) => void	—	Callback fired when any field changes.
disabled	boolean	false	Disables all three input fields.