Input, date

Updated 2026-05-19

Confidence anatomy medium variants medium motion high a11y high content medium

Overview

Used for selecting a single date, a date range, or a specific point in time. Best for scheduling or historical data entry.

1
Label
caller-supplied text bound to the control via for/aria-labelledby
2
Required indicator
visible asterisk; aria-required carries the semantics
3
Control
the input/select/checkbox/radio/toggle element
4
Helper text
optional persistent guidance below the control
5
Validation message
error/warning/success; replaces helper text when active
6
Leading icon (optional)
decorative or semantic hint inside the control
7
Trailing icon (optional)
often interactive — clear, reveal, dropdown caret

	`Enabled`	`Hovered`	`Focused`	`Error`	`Disabled`	`Fille`	`Activ`
`Single date`
`Date range`

focus-ring fade-in on focus; opacity transition on disabled