Date

A date typed, not picked. The field types the punctuation for you, takes a paste of whatever shape, and never tells you whether the date is real.

Date(Optional)

⌘ + S

Typed, not picked. Paste works too.

<DateInput
  size="md"
  label="Date"
  required
  optional
  info="We only use this to schedule the run."
  shortcut="⌘ + S"
  hint="Typed, not picked. Paste works too."
/>

There is no calendar

And there will not be one. The scope rule for this library is inputs, and a date picker is a different product, with locales, ranges, a month grid, keyboard navigation across weeks and a popover that has to know about the viewport. This is the field half, done properly, and it sits happily under whichever picker you already use.

Pattern

One prop drives the placeholder, the mask and the max length together, so a different order needs nothing else changed. 0 is a digit slot; everything else is a literal the field types for you.

<DateInput pattern="0000-00-00" placeholder="YYYY-MM-DD" />
<DateInput pattern="00/00/0000" placeholder="MM/DD/YYYY" />
<DateInput pattern="00.00.0000" placeholder="DD.MM.YYYY" />

Literals are only ever appended behind a digit, never ahead of the caret. A field that shows “12/” before you have typed the month puts your caret behind punctuation you did not ask for, and every backspace then has to step over it.

Only digits survive from what arrives, so pasting 12.03.2026 into a slash pattern lands correctly without you writing a parser.

What you get back

onChange gives the masked string exactly as displayed, never a Date. “31/02/2026” is a real thing somebody can type, and deciding whether that is an error is validation, which this library does not own. onComplete fires when every slot is full, which is the moment to hand it to whatever does.

Props

Prop	Type	Default	Notes
`pattern`	string	'00/00/0000'	`0` is a digit slot; everything else is typed for you.
`onComplete`	(value: string) => void	—	Fires when every slot is filled.
`shortcut`	ReactNode	—	A keyboard hint at the end of the field.
`leading`	ReactNode	<CalendarIcon />	Pass null to drop it.
`required`	boolean	false	Renders the asterisk and sets aria-required.
`optional`	boolean	false	Renders the muted "(Optional)" note.
`info`	string	—	Info marker beside the label, with this as its tooltip.

Shared

Prop	Type	Default	Notes
`value`	string	—	Controlled value.
`defaultValue`	string	—	Initial value when uncontrolled.
`onChange`	(value: string) => void	—	Receives the value, never the event.
`label`	ReactNode	—	Rendered as a real <label> wired by htmlFor.
`hint`	ReactNode	—	Helper text under the field.
`error`	ReactNode	—	Error text. Implies invalid unless invalid says otherwise.
`invalid`	boolean	—	Forces the error styling on or off.
`errorKey`	string \| number	—	Change it to replay the error animation.
`disabled`	boolean	false	Greys the field out.
`readOnly`	boolean	false	Reads as filled, stays focusable.
`size`	'sm' \| 'md' \| 'lg'	'md'	Size scale, where the component defines one.
`classNames`	Record<Part, string>	—	Per-part class names.