Date Field

A date field allows users to enter and edit date values using a keyboard.

Date

mmddyyyy

<DateField className="max-w-xs">
  <Label>Date</Label>
  <DateInput />
</DateField>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/date-field

Usage

Use DateField to allow users to enter and edit date values using a keyboard.

import { DateField } from '@/components/ui/date-field'
import { DateInput } from '@/components/ui/input'
import { Label } from '@/components/ui/field'

<DateField>
  <Label>Date</Label>
  <DateInput />
</DateField>

Anatomy

DateField wraps a Label, a DateInput that renders the individually editable segments, and optionally a Description and FieldError.

import { DateField } from '@/components/ui/date-field'
import { DateInput } from '@/components/ui/input'
import { Description, FieldError, Label } from '@/components/ui/field'
;<DateField>
  <Label />
  <DateInput />
  <Description />
  <FieldError />
</DateField>

Value

Values are @internationalized/date objects. Use defaultValue for uncontrolled state, or value with onChange to control it.

import { parseDate } from '@internationalized/date'
;<DateField defaultValue={parseDate('2020-02-03')}>
  <Label>Date</Label>
  <DateInput />
</DateField>

Set granularity (day, hour, minute, or second) to control which segments render, and constrain the range with minValue and maxValue.

Validation

Mark the field with isRequired, or drive it with isInvalid and a custom validate. Errors surface through FieldError.

<DateField isInvalid>
  <Label>Event date</Label>
  <DateInput />
  <FieldError>Please select a date.</FieldError>
</DateField>

Examples

Basic Date Field

mmddyyyy

With Icon

mmddyyyy

Event Date Picker

Appointment Booking

Trip Date Range

Check-in

mmddyyyy

The day your trip starts.

Check-out

mmddyyyy

The day you head back home.

API Reference

DateField

A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`Granularity`	`—`
	`boolean`	`false`
	`12 \| 24`	`—`
	`function`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`T \| null`	`—`
	`boolean`	`—`

	`T \| null`	`—`
	`T \| null`	`—`
	`function`	`—`

DateInput

A date input groups the editable date segments within a date field.

Prop	Type	Default
	`"lg" \| "md" \| "sm"`	`"md"`

DateSegment

A date segment displays an individual unit of a date and time, and allows users to edit the value by typing or using the arrow keys to increment and decrement.

Prop	Type	Default
	`ReactNode \| function`	`—`

Last updated on 7/7/2026