Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA segmented date input: day, month and year are separate spinbuttons in the order of the locale, typed or stepped with the keyboard, with an ISO date value.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
Use it where a person knows the date and types it: a birth date, a due date, a filter box. It is faster than a calendar for a known date and works from the keyboard alone. Pair it with a calendar in a popover when people also browse.
Do not use it to browse an unknown date (use a calendar) or for a year-less recurring date.
import { DateField } from "@/components/ui/date-field"const [due, setDue] = useState<string | null>("2026-10-25")
<DateField
label="Due date"
value={due}
onValueChange={setDue}
min="2026-01-01"
isDateUnavailable={(d) => d.endsWith("-12-25")}
/>| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | null | - | Controlled ISO date, YYYY-MM-DD, or null when empty. |
| defaultValue | string | null | null | Initial value when uncontrolled. |
| onValueChange | (value: string | null) => void | - | Called with a complete valid date, or null while a segment is empty. |
| min / max | string | - | Earliest and latest allowed ISO date. A value outside is marked invalid. |
| isDateUnavailable | (date: string) => boolean | - | Marks single dates as unavailable. |
| locale | string | browser | BCP 47 tag; sets the order and the separators. |
| label | string | "Date" | Accessible name of the group. |
| placeholders / segmentLabels | Partial<Record<day | month | year, string>> | dd, mm, yyyy | Placeholder text and spoken names, for translation. |
| name | string | - | Adds a hidden input with the ISO value for native forms. |
| disabled / readOnly / invalid | boolean | false | Field states. |
| Keys | Action |
|---|---|
| 0-9 | Types into the focused segment and moves on when the segment is complete |
| Up / Down | Increments or decrements the segment and wraps around |
| Page Up / Page Down | Steps by 7 days, 3 months or 10 years |
| Home / End | Jumps to the smallest or largest value of the segment |
| Backspace / Delete | Removes the last typed digit, then clears the segment |
| Left / Right | Moves to the previous or next segment (reversed in right-to-left text) |
spinbutton with aria-valuemin, aria-valuemax, aria-valuenow and an aria-valuetext ("Empty" while unset), inside a group named by label.aria-invalid on the group; the field never blocks a keystroke, so the person can fix the value.contenteditable so soft keyboards show the numeric pad; the browser never edits the DOM because text input is intercepted.primary token pair for contrast in light and dark mode.