DateInput
A day, typed segment by segment or picked in a calendar, such as a due date. The order of day, month and year follows the locale.
- DateInput
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, DateInput
Due date
11202026
The board marks it red after this day.
Start datePick a start date before the due date.
mmddyyyy
Created
142026
Dark theme, DateInput
Due date
11202026
The board marks it red after this day.
Start datePick a start date before the due date.
mmddyyyy
Created
142026
High contrast theme, DateInput
Due date
11202026
The board marks it red after this day.
Start datePick a start date before the due date.
mmddyyyy
Created
142026
UsageLink to the section Usage
import { DateInput } from '@skribly/ui/forms'<DateInput label="Due date" defaultValue={parseDate('2026-11-20')} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Each segment is a spin button: type digits or use the arrow keys, and Tab moves on.
- The calendar button opens a dialog where arrow keys move by day, Page Up and Page Down by month.
- Today is bold and underlined; the chosen day is filled.
This demo runs through axe in all three themes on every test run. See what the tests check.