Date Input

A segmented date input component with keyboard navigation in DD/MM/YYYY format. Each date part (day, month, year) is individually editable with arrow key support.

Import

Usage

Default

Birth date

Empty

Birth date

Required

Birth date*

With Description

Birth date

Enter your date of birth in DD/MM/YYYY format.

Validation

Birth date

Disable Errors

Birth date

Custom Error

Birth date*

Please enter a valid date.

DateInput Props

Attribute	Type	Default	Description
label	ReactNode	-	Label text for the input.
value	Date \| null	-	The current date value (controlled).
onChange	(date: Date \| null) => void	-	Callback fired when the date changes.
className	string	-	Additional CSS classes for the component.
isRequired	boolean	false	Shows an asterisk (*) next to the label.
description	ReactNode	-	Helper text displayed below the input.
isInvalid	boolean	false	Sets the input to error state with red border.
errorMessage	ReactNode	-	Error message displayed when isInvalid is true.
disableErrors	boolean	false	Disables automatic validation error messages.