Skip to content
Try free

DatePicker

A date field with a calendar button: type the date or pick it from a month grid.

  • Pro
  • Version 2.0.0-rc.1
  • APG pattern: Date picker dialog

Examples

Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.

Default

Delivery date
We deliver Monday to Saturday.
Show the code

Default, code

<DatePicker
  label="Delivery date"
  defaultValue={parseDate('2026-10-24')}
  hint="We deliver Monday to Saturday."
/>

Open

Delivery date
Show the code

Open, code

<DatePicker label="Delivery date" defaultValue={parseDate('2026-10-24')} defaultOpen />

Empty

Start date
Show the code

Empty, code

<DatePicker label="Start date" />

Invalid

Delivery date
Error: Choose a delivery date
Show the code

Invalid, code

<DatePicker
  label="Delivery date"
  isRequired
  isInvalid
  errorMessage="Choose a delivery date"
/>

Disabled

Delivery date
Show the code

Disabled, code

<DatePicker label="Delivery date" isDisabled defaultValue={parseDate('2026-10-24')} />

Range

Trip dates
Show the code

Range, code

<DateRangePicker label="Trip dates" defaultValue={{ start: parseDate('2026-10-12'), end: parseDate('2026-10-16') }} />

Range, open

Trip dates
Show the code

Range, open, code

<DateRangePicker label="Trip dates" defaultOpen defaultValue={{ start: parseDate('2026-10-12'), end: parseDate('2026-10-16') }} />

Tokens

The 8 design tokens DatePicker reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 8 tokens
Tokens DatePicker reads
TokenValue nowCSS variable
color.bg.muted…--sd-color-bg-muted
color.bg.subtle…--sd-color-bg-subtle
color.icon.default…--sd-color-icon-default
color.text.secondary…--sd-color-text-secondary
input.height…--sd-input-height
input.radius…--sd-input-radius
spacing.inset.md…--sd-spacing-inset-md
target.min…--sd-target-min

Install

Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.

Add it from the registry (Pro licence key)

npx shadcn@latest add @superduperui/date-picker

Then import it

import { DatePicker, DateRangePicker } from "@/components/ui/date-picker"

Props

DatePicker props
PropTypeWhat it does
labelrequiredstringVisible label (required).
hintstring
errorMessagestring | ((validation: ValidationResult) => string)
hideLabelbooleanKeep the label for assistive technology but hide it visually.

When to use it

Use it for

  • Delivery, booking and due dates
  • Date ranges (DateRangePicker)

Use something else for

  • Dates people type from memory (birthdays): use DateField
  • An always-visible month: use Calendar

Accessibility

Screen readers announce "Delivery date, group"; on open "Saturday, 24 October 2026, selected, button".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.

Compact density meets AA (2.5.8, 24px targets), not AAA.

What your product still has to do

  • Say which dates are unavailable and why, in text near the field

Shared patterns it ships with: 3.3.5 (hint states the rules); 3.3.6 (invalid dates are explained, never cleared).

This release’s test results

Test results for DatePicker in this release
axe-core (WCAG A, AA, AAA and best practice)160 runs across every story, theme, density and width: 0 violations
Rendered text contrast1,145 text runs: 0 below 7:1, lowest 8.43:1
Target size288 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)72 focus stops in 3 browser engines: all pass
Keyboard scriptChromium 6 of 6, Firefox 6 of 6, WebKit 6 of 6

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

DatePicker keyboard steps
KeyWhat happens
TabTab reaches the day segment
Alt+ArrowDownAlt+Down opens the calendar with focus on the selected day
ArrowLeftLeft moves one day back
EnterEnter picks the day, closes the calendar and fills the segments
Alt+ArrowDownAlt+Down opens it again
EscapeEsc closes without changing the date

In Figma

The Figma component is DatePicker, with Mode (Single, Range); State (Default, Hover, Focus, Open, Disabled, Invalid); Label visibility (Visible, Hidden); Content (Placeholder, Value). The Figma library isn’t published yet.

Figma to code: Mode (Single = DatePicker, Range = DateRangePicker); State (Default, Hover, Focus, Open = defaultOpen, Disabled = isDisabled, Invalid = isInvalid); Label visibility → hideLabel (Visible = false, Hidden = true); Content (Placeholder, Value; preview only); Value → defaultValue; nested Label → label; nested Hint → hint; nested FieldError → errorMessage.