Components
DateField

DateField

A list of date-segments used as base for date-picker and date-range-picker

Optional props

className

Custom className

type
string
default
null

minValue

The minimum allowed date that a user may select.

type
DateValue
default
null

maxValue

The maximum allowed date that a user may select.

type
DateValue
default
null

isDateUnavailable

Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.

type
((date: DateValue) => boolean)
default
null

placeholderValue

A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.

type
T
default
null

hourCycle

Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.

type
12
24
default
null

granularity

Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.

type
Granularity
default
null

hideTimeZone

Whether to hide the time zone abbreviation.

type
boolean
default
false

shouldForceLeadingZeros

Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.

type
boolean
default
null

isDisabled

Whether the input is disabled.

type
boolean
default
null

isReadOnly

Whether the input can be selected but not changed by the user.

type
boolean
default
null

isRequired

Whether user input is required on the input before form submission.

type
boolean
default
null

isInvalid

Whether the input value is invalid.

type
boolean
default
null

validationBehavior

Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

type
aria
native
default
aria

validate

A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.

type
((value: T) => true
ValidationError
null
undefined)
default
null

autoFocus

Whether the element should receive focus on render.

type
boolean
default
null

onFocus

Handler that is called when the element receives focus.

type
((e: React.FocusEvent<Target, Element>) => void)
default
null

onBlur

Handler that is called when the element loses focus.

type
((e: React.FocusEvent<Target, Element>) => void)
default
null

onFocusChange

Handler that is called when the element's focus status changes.

type
((isFocused: boolean) => void)
default
null

onKeyDown

Handler that is called when a key is pressed.

type
((e: KeyboardEvent) => void)
default
null

onKeyUp

Handler that is called when a key is released.

type
((e: KeyboardEvent) => void)
default
null

label

The content to display as the label.

type
React.ReactNode
default
null

description

A description for the field. Provides a hint such as specific requirements for what to choose.

type
React.ReactNode
default
null

errorMessage

An error message for the field.

type
React.ReactNode
((v: ValidationResult) => React.ReactNode)
default
null

isOpen

Whether the overlay is open by default (controlled).

type
boolean
default
null

defaultOpen

Whether the overlay is open by default (uncontrolled).

type
boolean
default
null

onOpenChange

Handler that is called when the overlay's open state changes.

type
((isOpen: boolean) => void)
default
null

value

The current value (controlled).

type
T
default
null

defaultValue

The default value (uncontrolled).

type
T
default
null

onChange

Handler that is called when the value changes.

type
((value: C) => void)
default
null

aria-label

Defines a string value that labels the current element.

type
string
default
null

aria-labelledby

Identifies the element (or elements) that labels the current element.

type
string
default
null

aria-describedby

Identifies the element (or elements) that describes the object.

type
string
default
null

aria-details

Identifies the element (or elements) that provide a detailed, extended description for the object.

type
string
default
null

id

The element's unique identifier. See MDN.

type
string
default
null

name

The name of the input element, used when submitting an HTML form. See MDN.

type
string
default
null