Skip to main content

DateField()

DateField<T>(__namedParameters): Element

DateField - A comprehensive date input component with segmented editing

Provides accessible date input functionality with separate segments for day, month, and year. Includes calendar icon, validation states, and international date format support with keyboard navigation between segments.

Type Parameters​

T​

T extends DateValue

Parameters​

__namedParameters​

DateFieldProps<T>

Returns​

Element

Examples​

// Basic date field
<DateField label="Birth Date" />
// Date field with validation
<DateField
  label="Event Date"
  isRequired
  isInvalid={hasError}
  errorMessage="Please select a valid date"
/>
// Date field with custom formatting
<DateField
  label="Meeting Date"
  shortMonth={false}
  placeholder="Select meeting date"
/>
// Compact date field
<DateField
  label="Due Date"
  size="small"
  description="When is this task due?"
/>
// Controlled date field
<DateField
  label="Selected Date"
  value={selectedDate}
  onChange={setSelectedDate}
/>