DateInput

Borders · src/components/DateInput/DateInput.tsx

A date typed as three parts: day, month, year.

Split from DatePicker on purpose. For a date of birth, an expiry or anything far from today, a calendar is the wrong instrument - it asks someone to page back eighty years to reach a year they could have typed in four keystrokes. The calendar is never the only way in.

order exists because the order is not universal, and a form that hard-codes one teaches half its readers to enter the wrong date. The month accepts a name as well as a number.

Every part is type="text" with a numeric keypad, never type="number". Chrome silently drops letters from a number input, the scroll wheel changes the value under the pointer, a screen reader announces an unlabelled spin button, and it would refuse the month names this accepts.

Import

import { DateInput } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
id	string
label	React.ReactNode
hint	React.ReactNode
error	React.ReactNode
required	boolean
order	string	Field order. dmy, mdy, ymd - whatever the reader writes.
locale	string
birthday	boolean	Turns on birthday autofill on the three parts.
value	DateInputValue
dayLabel	React.ReactNode
monthLabel	React.ReactNode
yearLabel	React.ReactNode
className	string
onChange	(value: DateInputValue, key: 'day' | 'month' | 'year') => void

Exported types

DateInputValue