DateField
The <DateField>
allows users to enter and edit date values using a keyboard. Each part of a date value is displayed in an individually editable segment. These segments are individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard.
Anatomy
A <DateField>
consists of a label and a group of segments representing each unit of a date and time, such as years, months, days, hours, and minutes.

Appearance
The appearance of a component can be customized using the variant
and size
props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
Property | Type | Description |
---|---|---|
variant | - | The available variants of this component. |
size | - | The available sizes of this component. |
Usage
The <DateField>
component is a versatile input element used for selecting dates in forms. It enhances user experience by providing a structured way to input date information, reducing errors associated with manual entry. With features like labels and descriptions, it clearly communicates its purpose to users. The component can also support default values. Overall, the <DateField>
is essential for applications requiring date selection, ensuring both accessibility and usability.
Props
action?
ReactElement<any, string | JSXElementConstructor<any>>;
aria-describedby?
string;
aria-details?
string;
aria-label?
string;
aria-labelledby?
string;
autoFocus?
boolean;
defaultValue?
DateValue | null;
description?
ReactNode;
disabled?
boolean;
true
, the date field is disabled."false"
error?
boolean;
true
, the field is considered invalid and if set the errorMessage is shown instead of the description
."false"
errorMessage?
ReactNode | ((v: ValidationResult) => ReactNode);
granularity?
Granularity;
"day"
for dates, and "minute"
for times.hideTimeZone?
boolean;
"false"
hourCycle?
12 | 24;
id?
string;
isDateUnavailable?
(date: DateValue) => boolean;
label?
ReactNode;
maxValue?
DateValue | null;
minValue?
DateValue | null;
name?
string;
onBlur?
(e: FocusEvent<Element, Element>) => void;
onChange?
(value: DateValue | null) => void;
onFocus?
(e: FocusEvent<Element, Element>) => void;
onFocusChange?
(isFocused: boolean) => void;
onKeyDown?
(e: KeyboardEvent) => void;
onKeyUp?
(e: KeyboardEvent) => void;
placeholderValue?
DateValue | null;
readOnly?
boolean;
true
, the date field is readOnly."false"
ref?
Ref<HTMLInputElement>;
ref.current
to null
(or call the ref with null
if you passed a callback ref).
@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}required?
boolean;
true
, the date field is required."false"
shouldForceLeadingZeros?
boolean;
slot?
string | null;
null
value indicates that the local props completely override all props received from a parent.validate?
(value: DateValue) => true | ValidationError | null;
validationBehavior="native"
. For realtime validation, use the isInvalid
prop instead.validationBehavior?
"native" | "aria";
'native'
value?
DateValue | null;
width?
WidthProp;
'full'
Alternative components
DatePicker: a user interface element that allows users to select a date from a calendar.