Date Picker

The DatePicker component provides a styled date input with labels, validation text, and native picker access.

Usage & Examples

Release Date

Choose a date in the current release window.

release-date.tsx
<DatePicker
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />

Props API

39 props
Columns
Date Picker props API
Default
Description
autoCompleteReact.HTMLInputAutoCompleteAttributeNoprops"off"Optional autocomplete value.
buttonClassNamestringNoprops—Additional class name for the picker trigger button.
classNamestringNostyling—Additional class name for the component root.
containerClassNamestringNoprops—Additional class name for the outer label/component container.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
defaultValuestringNoprops—Initial date value in YYYY-MM-DD format for uncontrolled usage.
disabledbooleanNopropsfalseWhether the component is disabled.
errorClassNamestringNoprops—Additional class name for error text.
errorMessageReactNodeNoprops—Error text connected with aria-errormessage and announced as an alert.
fullWidthbooleanNopropsfalseWhether the picker should stretch to the full available width.
helperTextReactNodeNoprops—Helper text connected with aria-describedby.
helperTextClassNamestringNoprops—Additional class name for description text. Additional class name for helper text.