DateInput

A segmented date input that lets users enter date values field by field.

Usage

A compound component that provides an accessible, segmented interface for entering dates. Each part of the date (month, day, year) is an independently focusable and editable segment.

import { DateInput } from "@elemnts-ui/react";

<DateInput>
  <DateInput.Label>Date</DateInput.Label>
  <DateInput.Control>
    <DateInput.SegmentGroup>
      <DateInput.Context>
        {(api) =>
          api.segments.map((segment, idx) => (
            <DateInput.Segment key={idx} segment={segment} />
          ))
        }
      </DateInput.Context>
    </DateInput.SegmentGroup>
    <DateInput.HiddenInput />
  </DateInput.Control>
</DateInput>;

Disabled

Set the disabled prop to prevent interaction with the date input.

With Field

Use DateInput inside a Field component to add a label, helper text, and validation states with proper accessibility wiring.

API Reference

DateInput

The root component that manages the date input state and accessibility behavior.

Prop	Type	Default
allSegments	`Partial<{ year: boolean; month: boolean; day: boolean; hour: boolean; minute: boolean; second: boolean; dayPeriod: boolean; era: boolean; literal: boolean; timeZoneName: boolean; weekday: boolean; unknown: boolean; fractionalSecond: boolean }>`	-
asChild	`boolean`	`false`
createCalendar	`(identifier: CalendarIdentifier) => Calendar`	-
defaultPlaceholderValue	`DateValue`	-
defaultValue	`DateValue[]`	-
dir	`"ltr" \| "rtl"`	`"ltr"`
disabled	`boolean`	`false`
form	`string`	-
format	`(date: DateValue, details: FormatDateDetails) => string`	-
formatter	`DateFormatter`	-
getRootNode	`() => ShadowRoot \| Node \| Document`	-
granularity	`DateGranularity`	`"day"`
hideTimeZone	`boolean`	`false`
hourCycle	`HourCycle`	-
id	`string`	-
ids	`Partial<{ root: string; label: (index: number) => string; control: string; segmentGroup: (index: number) => string; hiddenInput: (index: number) => string }>`	-
invalid	`boolean`	`false`
isDateUnavailable	`(date: DateValue, locale: string) => boolean`	-
locale	`string`	`"en-US"`
max	`DateValue`	-
min	`DateValue`	-
name	`string`	-
onFocusChange	`(details: FocusChangeDetails) => void`	-
onPlaceholderChange	`(details: PlaceholderChangeDetails) => void`	-
onValueChange	`(details: ValueChangeDetails) => void`	-
placeholderValue	`DateValue`	-
readOnly	`boolean`	`false`
required	`boolean`	`false`
selectionMode	`SelectionMode`	`"single"`
shouldForceLeadingZeros	`boolean`	`false`
timeZone	`string`	`"UTC"`
translations	`IntlTranslations`	-
value	`DateValue[]`

DateInputRootProvider

Provides an externally created date input API to the component tree.

Prop	Type	Default
value	`DateInputApi<PropTypes>`	required
asChild	`boolean`	`false`

DateInputLabel

The accessible label for the date input.

Prop	Type	Default
asChild	`boolean`	`false`

DateInputControl

Wraps the segment group and hidden input.

Prop	Type	Default
asChild	`boolean`	`false`

DateInputSegmentGroup

Groups the focusable date segments.

Prop	Type	Default
asChild	`boolean`	`false`
index	`number`	-

DateInputSegment

A single editable or literal segment of the formatted date.

Prop	Type	Default
segment	`DateSegment`	required
asChild	`boolean`	`false`

DateInputHiddenInput

A hidden native input used for form submission.

Prop	Type	Default
asChild	`boolean`	`false`
index	`number`	-

DateInputContext

Provides the date input API to a render function.

DateInputSegmentContext

Provides the current segment API to a render function.