Components
Date picker
The date picker allows the user to pick a single date.
When to use
Date selection
Use when users need to input or select dates such as scheduling, setting reminders, etc.
Date selection
Use when users need to input or select dates such as scheduling, setting reminders, etc.
Date selection
Use when users need to input or select dates such as scheduling, setting reminders, etc.
When to avoid
Complex date input
If users need to input complex date or time formats, consider using a combination of text input fields with clear formatting instructions
Complex date input
If users need to input complex date or time formats, consider using a combination of text input fields with clear formatting instructions
Complex date input
If users need to input complex date or time formats, consider using a combination of text input fields with clear formatting instructions
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.
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.
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
Default
Disabled
Error
Focused
Error focused
Read only
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.
Value
Date picker
Date picker