Date Input

A segment-based date input that allows users to enter dates by navigating individual date parts.

Date

mmddyyyy

Anatomy

<DateInput.Root>
  <DateInput.Label />
  <DateInput.Control>
    <DateInput.SegmentGroup>
      <DateInput.Segment />
    </DateInput.SegmentGroup>
  </DateInput.Control>
  <DateInput.HiddenInput />
</DateInput.Root>

Examples

Default Value

Use the defaultValue prop with parseDate to set the initial date value.

Controlled

Use the value and onValueChange props to control the date input's value programmatically.

Root Provider

An alternative way to control the date input is to use the RootProvider component and the useDateInput hook. This way you can access the state and methods from outside the component.

Granularity

Use the granularity prop to control which date fields are displayed. Supported values are day, hour, minute, and second.

Time Only

To create a time-only input, set granularity to minute (or second) and provide a formatter that only includes time fields. Use the hourCycle prop to switch between 12 and 24 hour formats.

Range

To create a date input that allows a range selection, set the selectionMode prop to range and render two SegmentGroup components with index props set to 0 and 1.

Min and Max

Use the min and max props with parseDate to restrict the selectable date range. Dates outside this range will be marked as invalid.

Disabled

Use the disabled prop to prevent user interaction with the date input.

Read Only

Use the readOnly prop to make the date input non-editable while still being focusable.

Invalid

Use the invalid prop to indicate an error state on the date input.

Leading Zeros

Use the shouldForceLeadingZeros prop to toggle whether numeric segments are padded with a leading zero.

Localized

Use the locale prop to set the language and regional formatting of the date segments.

RTL

Set the dir prop to rtl for right-to-left language support.

With Clear Button

Use useDateInput via RootProvider to access the clearValue method and render a clear button alongside the input.

With Date Picker

Combine DateInput with DatePicker by syncing their values using onValueChange to provide both typed and calendar-based date selection.

API Reference

Props

Context

API

Property	Type
`focused`	`boolean` Whether the date input is focused
`disabled`	`boolean` Whether the date input is disabled
`invalid`	`boolean` Whether the date input is invalid
`value`	`DateValue[]` The selected date(s).
`valueAsDate`	`Date[]` The selected date(s) as Date objects.
`valueAsString`	`string[]` The selected date(s) as strings.
`placeholderValue`	`DateValue` The placeholder date.
`displayValues`	`IncompleteDate[]` Per-group editing state. Each IncompleteDate tracks which segments have been filled in by the user (non-null = entered, null = placeholder).
`focus`	`VoidFunction` Focuses the first segment.
`setValue`	`(values: DateValue[]) => void` Sets the selected date(s) to the given values.
`clearValue`	`VoidFunction` Clears the selected date(s).
`getSegments`	`(props?: SegmentsProps \| undefined) => DateSegment[]` Returns the segments for the given index.
`getSegmentState`	`(props: SegmentProps) => SegmentState` Returns the state details for a given segment.

Accessibility

Complies with the Spinbutton WAI-ARIA design pattern.