Date input
Date pickers are form elements used to input dates. When active, a date picker displays a whole month and allows for navigation between past or future months.
Usage guidelines
When to use
- To allow users to select or input a specific date.
When not to use
- If users are required to enter only one line of information; use Text input instead.
Writing guidelines
Labels: Date picker should always have a short, straightforward label, such as "Enter date". Helper text is optional.
Date format: The date format can be displayed differently depending on the location (mm/dd/yyyy or dd/mm/yyyy).
Specifications
Anatomy
Input Field - Date picker
- Label: Suggests what to do with the control.
- Helper text (optional): Provides additional assistance to user. Not visible when the dropdown is active.
- Calendar icon
- Selected date
- Calendar menu
- Selected day
- Current day
Variants
There are two styling variants for the form elements:
- Line-without background
- Shape-with background
Both styles provide the same functionality so which style should be used depends on the amount of data collected:
- for short form sets use the shape style (e.g., login, newsletter subscription)
- for long form sets use the line style (e.g., insurance information) Note that the form elements should be used consistently and cannot be mixed in the same form set.
Size
Shape variant is available in large and medium size, while Line variant is currently available in large size only.
Styling
Date picker is available for both light and dark theme.
| Variant | Style | Background colors |
|---|---|---|
| Line | Dark | White, Zurich White, Light Dove and Dove |
| Line | Light | Dark blue |
| Shape | Dark (shape in Zurich White) | White |
| Shape | Dark (shape in White) | Any brand color or secondary palette color and inclusive colors except for White |
Note: when using a light shape text area on a light background, change the help area (helper text and counter) text color to Zurich Blue so there is enough contrast.
Behavior
Positioning and alignment
Date Pickers are commonly part of form sets. To read about form sets in detail, please refer to Forms guideline section.
As a general rule, use 24px as vertical spacing between each form element. If you remove the help area (helper text and counter), decrease this space accordingly.
Interaction
Date Pickers are available in nine different states — inactive, hover, focused, active, error inactive, error active, disabled, filled and read-only.
A date can be either selected from the calendar menu or input with keyboard.
Read-only and disabled states
Note that the read-only state it to be used in scenarios where data that the user previously introduced needs to be presented but can not be modified, for example:
- In a Summary step of a multipage form, where users can review the dat introduced in previous steps.
- In a Profile page where there's some data the user can modify after registration (for instance address or phone number) and some data the user can't modify ever, or only with a request to the administrators (for instance, user name or registration email).
- In a Client Database entry, the user can read but modify data on fields depending on their access level.
Not to be confused with the disabled state, that is to be used when an input can't be interacted with until the user interacts with the form in some way, for example:
- In a Payment Method selection step, the credit card details fields are disabled until the card option is selected.
Accessibility guidelines
Design considerations
- Don't write important information as placeholder text as it will disappear when users are inputting information.
- Make sure there is enough contrast between the input field and the background.
- Make sure error messages are helpful and provide users with a way to solve the issue.
Accessibility of background colors in combination with an error message
In order to provide guidance on accessibility, we have checked the contrast ratios of our primary colors in combination with the light and the dark mode of the Input fields.
Please only use color combinations that match the WCAG requirements.