Date Input

Used to enter a specific date using segmented keyboard input.

AI TipWant to skip the docs? Use our Agent Skills

Date of birth

mmddyyyy

Usage

import { DateInput } from "@chakra-ui/react"

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

Shortcuts

The DateInput component also provides convenient shortcuts for common patterns.

DateInput.Segments

The DateInput.Segments shortcut renders a segment group containing every segment produced by the current granularity and formatter.

<DateInput.SegmentGroup>
  {dateInput.getSegments().map((segment, index) => (
    <DateInput.Segment key={index} segment={segment} />
  ))}
</DateInput.SegmentGroup>

This might be more concise if you don't need to customize each segment:

<DateInput.Segments />

Date Value

Date values are provided using objects from @internationalized/date, which handles timezone-safe, locale-aware date handling.

This will be replaced by the Temporal API when it's widely supported in browsers.

Examples

Sizes

Use the size prop to change the size of the date input.

Date of birth (size: 2xs)

mmddyyyy

Date of birth (size: xs)

mmddyyyy

Date of birth (size: sm)

mmddyyyy

Date of birth (size: md)

mmddyyyy

Date of birth (size: lg)

mmddyyyy

Date of birth (size: xl)

mmddyyyy

Date of birth (size: 2xl)

mmddyyyy

Variants

Use the variant prop to change the appearance of the date input.

Date of birth - outline

mmddyyyy

Date of birth - subtle

mmddyyyy

Date of birth - flushed

mmddyyyy

Disabled

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

Date of birth

mmddyyyy

Invalid

Use the invalid prop to indicate that the date input value is invalid.

Date of birth

mmddyyyy

Read Only

Use the readOnly prop to prevent modification while keeping the value visible.

Date of birth

1262026

Controlled

Use the value and onValueChange props to control the date value.

Selected: 2026-01-26

Date of birth

1262026

Default Value

Use the defaultValue prop to set an initial date without controlling it.

Date of birth

1262026

Min and Max

Use the min and max props to restrict the range of accepted dates.

Appointment date (2026 only)

mmddyyyy

Leading Zeros

Use the shouldForceLeadingZeros prop to always render two-digit day and month segments.

Date of birth

01052026

Granularity

Use the granularity prop to control which fields are shown. Set it to hour, minute or second to enter a time alongside the date.

Appointment

mmddyyyy––––AM

Time Only

Use the granularity and formatter props to compose a time-only input.

Appointment time

––––AM

Time Zone

A ZonedDateTime value renders a time zone segment. Use hourCycle to switch between 12 and 24 hour time, and hideTimeZone to hide the segment.

Meeting time

232026845AMPST

12 hourHide time zone

Range

Set the selectionMode prop to "range" to enter a start and end date. Pass the index prop to DateInput.Segments and DateInput.HiddenInput to target each date in the range.

Trip duration

mmddyyyy

Clear Trigger

Combine the useDateInputContext hook with the clearValue method to render a clear trigger when a value is present.

Date of birth

1262026

Date Picker

Compose the date input with the DatePicker component using the useDateInput hook and the DateInput.RootProvider component. This provides a segmented keyboard input alongside a calendar trigger.

Date of birth

mmddyyyy

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

React Hook Form

Here's an example of integrating with react-hook-form using the Controller pattern.

Locale

Use the locale prop to change the order and format of the segments.

Geburtsdatum

ttmmjjjj

RTL

Wrap the date input in LocaleProvider to set the locale and text direction together. Pass dir="rtl" directly to override direction on its own.

تاريخ الميلاد

يومشهرسنة

Props

Root

Prop	Default	Type
`dir`	`'ltr'`	`'ltr' \| 'rtl'` The document's text/writing direction.
`granularity`	`'day'`	`DateGranularity` Determines the smallest unit that is displayed in the date input.
`locale`	`'en-US'`	`string` The locale (BCP 47 language tag) to use when formatting the date.
`selectionMode`	`'single'`	`SelectionMode` The selection mode of the date input. - `single` - only one date can be entered - `range` - a range of dates can be entered (start and end)
`timeZone`	`'UTC'`	`string` The time zone to use
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`size`	`'md'`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` The size of the component
`variant`	`'outline'`	`'outline' \| 'subtle' \| 'flushed'` The variant of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.
`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 }>` The computed segments map for the formatter.
`createCalendar`		`(identifier: CalendarIdentifier) => Calendar` A function that creates a calendar object for a given calendar identifier. Use this to support non-Gregorian calendars (e.g., Persian, Islamic, Buddhist).
`defaultPlaceholderValue`		`DateValue` The initial placeholder date when rendered.
`defaultValue`		`DateValue[]` The initial selected date(s) when rendered. Use when you don't need to control the selected date(s).
`disabled`		`boolean` Whether the date input is disabled.
`form`		`string` The `form` attribute of the hidden input element.
`format`		`(date: DateValue, details: FormatDateDetails) => string` The format function for converting a DateValue to a string.
`formatter`		`DateFormatter` The date formatter to use.
`getRootNode`		`() => ShadowRoot \| Node \| Document` A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`hideTimeZone`	`false`	`boolean` Whether to hide the time zone segment when the value is a `ZonedDateTime`. Has no effect for values without a time zone.
`hourCycle`		`HourCycle` Whether to use 12-hour or 24-hour time format. By default, this is determined by the locale.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string label: (index: number) => string control: string segmentGroup: (index: number) => string hiddenInput: (index: number) => string }>` The ids of the elements in the date input. Useful for composition.
`invalid`		`boolean` Whether the date input is invalid
`isDateUnavailable`		`(date: DateValue, locale: string) => boolean` Returns whether a date is unavailable. When a committed date matches, the input is marked as invalid.
`max`		`DateValue` The maximum date that can be selected.
`min`		`DateValue` The minimum date that can be selected.
`name`		`string` The `name` attribute of the input element.
`onFocusChange`		`(details: FocusChangeDetails) => void` A function called when the date input gains or loses focus.
`onPlaceholderChange`		`(details: PlaceholderChangeDetails) => void` A function called when the placeholder value changes.
`onValueChange`		`(details: ValueChangeDetails) => void` Function called when the value changes.
`placeholderValue`		`DateValue` The controlled placeholder date.
`readOnly`		`boolean` Whether the date input is read-only.
`required`		`boolean` Whether the date input is required
`shouldForceLeadingZeros`	`false`	`boolean` Whether to always show leading zeros in month, day, and hour fields. When false, formatting follows the locale default (e.g. "1" instead of "01").
`translations`		`IntlTranslations` The localized messages to use.
`value`		`DateValue[]` The controlled selected date(s).

RootProvider

Prop	Default	Type
`value` *		`DateInputApi<PropTypes>`
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Segments

Prop	Default	Type
`index`		`number` The index of the date value. Useful when `selectionMode` is `range`.
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Segment

Prop	Default	Type
`segment` *		`DateSegment`
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

HiddenInput

Prop	Default	Type
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`index`		`number`

Installation

Jan	Feb	Mar	Apr
May	Jun	Jul	Aug
Sep	Oct	Nov	Dec

2020	2021	2022	2023
2024	2025	2026	2027
2028	2029

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Date Input

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Usage

Usage

S	M	T	W	T	F	S
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5