Date Input

A visual way to choose a date using a calendar view and input box.

Examples

Basic Usage

Date Presets

Allow to select a date from a predefined set of dates, useful for applications requiring a specific date selection. User can use the presets prop to define the presets.

API

Component

Name	Type	Default
`size`	`string` Size of the input.	`'medium'`
`fullWidth`	`boolean` If true, the input will take up the full width of its container.
`selectOnFocus`	`boolean` If true, the input will be focused during the first mount.
`error`	`boolean` If true, the input will show an error state.
`containerClassname`	`string` Additional classname for the input container element.
`start`	`ReactNode` Content to display before the input.
`end`	`ReactNode` Content to display after the input.
`onValueChange`	`(value: string) => void` Shortcut for the onChange value event.
`theme`	`InputTheme & DateInputTheme` Theme for the Input. Custom theme for the date input.
`format`	`string` The format in which the date should be displayed.	`'MM/dd/yyyy'`
`placement`	`Placement` Calendar placement type.	`'bottom-start'`
`openOnFocus`	`boolean` Open calendar on field focus	`true`
`preset`	`PresetOption[]` Preset to show in quick filter.	`[]`
`openCalendarOptionName`	`string` Name of the option to open the calendar.
`icon`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Icon to show in open calendar button.	`<CalendarIcon />`
`isRange`	`boolean`
`value`	`Date \| [Date, Date]`
`onChange`	`((value: [Date, Date]) => void) \| ((value: Date) => void)`

Last updated on June 4, 2026

Debounced Input Inline Input