| Table of Contents |
|---|
...
State | Visual | |
|---|---|---|
General |  | |
Regular (x2 in size) |  | |
Hover (x2 in size) |  | |
Active (x2 in size) |  | |
Selected (x2 in size) |  | |
Disabled / Greyed out (x2 in size) |  | In case of greyed out the cursor will still be shown as a hand. |
Today (x2 in size) |  |
Interaction
...
Clicking on the calendar Icon Button will open the calendar drop-down.
The calendar drop-down will be closed either:
when a date is selected, or
by clicking outside the calendar drop-down.
Clicking the left and right arrows on the calendar moves backwards and forwards between the months.
Validation and Errors
Please refer to Field validationValidation page for more information.
A date field with a warning will have an orange border and a warning icon, as displayed below:
 |
A date field with an error will have a red border and an error icon, as displayed below:
 |
Best practices
Provide a help text which shows the required date format. This will help to prevent input errors.
When it’s important to go back to the current day, consider adding a “Today” Today button.
Accessibility Compliance
...
Zeplin Link | Thumbnail |
|---|---|
 |
Code
...
| sanitize | false |
|---|
...