The date picker allows the user to pick a single date.
When to use
When to avoid
Specifications
Label placement
Stacked
Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.
Left to right
Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.
States
Default
Disabled
Error
Focused
Error focused
Read only
Anatomy
1
Text field
Opens the date picker upon selection and allows the user to manually enter a date.
2
Dropdown menu
Enables the ability to change the month and year for selection.
3
Navigation arrow
Allows ability to cycle through the month selections without leaving the date picker.
4
Actions
To cancel or confirm date selection.