Default
Date of birth
ddmmyyyy
For example, 27 3 1990Show the codeHide the code
Default, code
<DateField label="Date of birth" hint="For example, 27 3 1990" />DateField
A date typed in day, month and year segments, without a calendar.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Spinbutton segments (date)
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.
With a value
Date of birth
27031990
Show the codeHide the code
With a value, code
<DateField label="Date of birth" defaultValue={parseDate('1990-03-27')} />Invalid
Date of birth
ddmmyyyy
Error: Enter your date of birthShow the codeHide the code
Invalid, code
<DateField
label="Date of birth"
isRequired
isInvalid
errorMessage="Enter your date of birth"
/>Disabled
Date of birth
27031990
Show the codeHide the code
Disabled, code
<DateField label="Date of birth" isDisabled defaultValue={parseDate('1990-03-27')} />Tokens
The 18 design tokens DateField 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 18 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.brand-subtle | … | --sd-color-bg-brand-subtle |
| color.border.subtle | … | --sd-color-border-subtle |
| color.text.default | … | --sd-color-text-default |
| color.text.disabled | … | --sd-color-text-disabled |
| color.text.secondary | … | --sd-color-text-secondary |
| input.bg | … | --sd-input-bg |
| input.bg-disabled | … | --sd-input-bg-disabled |
| input.border | … | --sd-input-border |
| input.border-hover | … | --sd-input-border-hover |
| input.border-invalid | … | --sd-input-border-invalid |
| input.fg | … | --sd-input-fg |
| input.height | … | --sd-input-height |
| input.placeholder | … | --sd-input-placeholder |
| input.radius | … | --sd-input-radius |
| motion.duration.fast | … | --sd-motion-duration-fast |
| motion.easing.standard | … | --sd-motion-easing-standard |
| radius.xs | … | --sd-radius-xs |
| 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-fieldThen import it
import { DateField, DateSegments, dateInputBox } from "@/components/ui/date-field"Props
| Prop | Type | What it does |
|---|---|---|
labelrequired | string | Visible label (required). |
hint | string | |
errorMessage | string | ((validation: ValidationResult) => string) | |
hideLabel | boolean | Keep the label for assistive technology but hide it visually. |
When to use it
Use it for
- Dates people know without looking (date of birth, card expiry)
Use something else for
- Choosing a date relative to today or seeing weekdays: use DatePicker
- Times: use TimeField
Accessibility
Screen readers announce "Date of birth, group" then "day, 27, spin 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.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Show the expected format in the hint
Shared patterns it ships with: 1.3.6 (autocomplete bday when it is the user's own birthday); 3.3.5 (hint shows the format).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 100 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 455 text runs: 0 below 7:1, lowest 8.43:1 |
| Target size | 78 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 54 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 5 of 5, Firefox 5 of 5, WebKit 5 of 5 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the day segment |
| ArrowUp | Up increases the day |
| ArrowRight | Right moves to the month segment |
| Typing a number sets the month and moves on to the year | |
| Shift+Tab | Shift+Tab moves back a segment |
In Figma
The Figma component is DateField, with State (Default, Hover, Focus, Disabled, Invalid); Label visibility (Visible, Hidden); Content (Placeholder, Value). The Figma library isn’t published yet.
Figma to code: State (Default, Hover, Focus, Disabled = isDisabled, Invalid = isInvalid); Label visibility → hideLabel (Visible = false, Hidden = true); Content (Placeholder, Value; preview only); Value → defaultValue (parseDate); nested Label → label; nested Hint → hint; nested FieldError → errorMessage.