Multiselect โ
A Multiselect is a dropdown that allows users to select more than one option from predefined list of options.
Usage guidelines โ
When to use โ
- To allow users to input data by selecting one or more options from a given list of options.
Writing guidelines โ
Labels
Multiselects 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.
- Chips: Selected options appear as dismissible chips.
- Chevron: Serves as an affordance and indicates wether the dropdown menu is open or closed.
- Selected option
- Unselected 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 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 โ
Multiselects 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 โ
Multiselects 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.