Select
Select is a form element that allows users to select one option from a given set of options.
Usage guidelines
When to use
- To allow users to input data by selecting an option from a given list of options.
When not to use
- If you want to allow multi-selection, use a Multiselect instead.
Writing guidelines
Labels
Selects should always have a short, clear label. Additional information are optional. Write important, additional information as helper text rather than placeholder text so it won't disappear.
Word length
Keep all labels concise.
Capitalization and punctuation
Write text labels in sentence case and without punctuation.
Specifications
Anatomy
- Label: Suggests what to expect in the dropdown list. When a text field is active, it appears above the placeholder text.
- Helper text (optional): Provides additional assistance to user. Not visible when the dropdown is active.
- Chevron: Serves as an affordance and indicates wether the dropdown menu is open or closed.
- Placeholder text (optional): Provides hints or an example of selection. It disappears when users select their option.
- Dropdown menu: A list of options to choose from, displayed in the active state.
- Option
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.
The maximum height of a Select dropdown menu is 200 px, which corresponds to 5 items displayed at a time. With six or more items, an internal scrollbar is displayed.
Styling
Selects are 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 | Light (shape in White) | Any brand color or secondary palette color and inclusive colors except for White |
Note: when using a light shape input field 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
Selects 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
Selects are available in nine different states — inactive, hover, focused, active, error inactive, error active, disabled, filled and read-only.
To select an option, users can select an option from the given ones in the dropdown menu.
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.
