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."
  />

Visual variants

Themes

primary

Choose a date in the current release window.

secondary

Choose a date in the current release window.

tertiary

Choose a date in the current release window.

quaternary

Choose a date in the current release window.

States

success

Choose a date in the current release window.

warning

Choose a date in the current release window.

error

Choose a date in the current release window.

info

Choose a date in the current release window.

Sizes

xs

Choose a date in the current release window.

small

Choose a date in the current release window.

medium

Choose a date in the current release window.

large

Choose a date in the current release window.

Variants

solid

Choose a date in the current release window.

outline

Choose a date in the current release window.

glass

Choose a date in the current release window.

Rounding

none

Choose a date in the current release window.

medium

Choose a date in the current release window.

large

Choose a date in the current release window.

Shadows

none

Choose a date in the current release window.

light

Choose a date in the current release window.

strong

Choose a date in the current release window.

visual-variants.tsx
// Themes
<DatePicker theme="primary"
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />
<DatePicker theme="secondary"
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />
<DatePicker theme="tertiary"
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />
<DatePicker theme="quaternary"
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />

// States
<DatePicker state="success"
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />
<DatePicker state="warning"
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />
<DatePicker state="error"
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />
<DatePicker state="info"
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />

// Sizes
<DatePicker size="xs"
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />
<DatePicker size="small"
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />
<DatePicker size="medium"
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />
<DatePicker size="large"
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />

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

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

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

Interaction states

Disabled

Choose a date in the current release window.

Loading

Choose a date in the current release window.

Full width

Choose a date in the current release window.

interaction-states.tsx
// Disabled
<DatePicker disabled
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />
// Loading
<DatePicker loading
    label="Release date"
    defaultValue="2026-05-20"
    min="2026-05-01"
    helperText="Choose a date in the current release window."
  />
// Full width
<DatePicker fullWidth
    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.