Date Field

Keyboard date entry with locale-aware segments (no calendar popover).

Import

import { DateField } from '@marbleui/ui'

Props

<DateField>

Prop	Type	Default
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`
variant	`FieldVariant`	`—`

Also accepts React Aria props (106).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria DateField · React Aria DateInput · React Aria DateSegment. Follow the primitive's docs for the full keyboard map.

Usage notes

Keyboard date entry with editable segments (day, month, year, and time with granularity). It has no calendar popover: use DatePicker when users should pick from a calendar.

<DateField label="Birth date" defaultValue={new CalendarDate(1992, 4, 18)} />
<DateField label="Meeting" granularity="minute" onChange={setWhen} />

Values are @internationalized/date objects, not JS Date. Uncontrolled: defaultValue. Controlled: value + onChange.
Segment order and separators follow the locale; wrap in I18nProvider to force one. Day, month and hour show leading zeros by default (04/18/1992) so segments line up evenly; pass shouldForceLeadingZeros={false} to follow the locale. TimeField, DatePicker and DateRangePicker do the same.
minValue, maxValue, isRequired and errorMessage are supported for validation.
Without a visible label, pass aria-label. For time only, use TimeField.

Example source · show

import { CalendarDate, parseZonedDateTime } from '@internationalized/date'
import { I18nProvider } from 'react-aria-components'
import { DateField } from './date-field'

export const styles = {
  Outline: () => <DateField className="w-56" label="Birth date" defaultValue={new CalendarDate(1992, 4, 18)} />,
  Filled: () => <DateField className="w-72" variant="filled" label="Meeting" granularity="minute" defaultValue={parseZonedDateTime('2026-11-02T14:30[Europe/Amsterdam]')} />,
  Locale: () => (
    <I18nProvider locale="de-DE">
      <DateField className="w-56" label="Geburtsdatum" defaultValue={new CalendarDate(1992, 4, 18)} />
    </I18nProvider>
  ),
}

Source: packages/ui/src/date-field/date-field.tsx

Catalog

Category: date-time
Priority: Core
Primitive: react-aria
React Aria: DateField