Select
Note
A selection field that allows users to choose a single option or multiple options from a dropdown menu.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| ✔️ | Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
| ✔️ | Accessibility: Keyboard interactions | Includes descriptions of all keyboard interactions, focus indication and navigation order. |
| Accessibility: Text contrast | Text meets a contrast ratio of at least 4.5:1 for small text and 3:1 for large text (WCAG 2.0 1.4.3) and/or a lightness contrast value of at least Lc 75 for standard text and Lc 60 for large text (APCA). | |
| Accessibility: UI component contrast | Visual information required to identify states and boundaries of active UI components has a contrast ratio against adjacent colors of at least 3:1 (WCAG 2.1 1.4.11) and/or a lightness contrast value of at least Lc 60 (APCA). | |
| Usage guidelines | Includes a list of recommended and discouraged usages. | |
| Content guidelines | Includes content standards and guidelines for how to write or format in-product content for the component. | |
| Internationalization | Includes support for various locales and bi-directionality (RTL). | |
| Design tokens | All design attributes (color, typography, layout, animation, etc.) are available as design tokens. |
Anatomy
Default
- Field: The outermost encompassing element.
- Icon: An optional visual element that represents the select field.
- Placeholder: A temporary text provides hints for value selection.
- Input value: The value selected by the user.
- Clear button: An optional button that clears the input value.
- Chevron: An optional visual element that indicates the display state of a dropdown menu.
- Dropdown menu: The interactive popover interface where the user are presented with options to select from. It is the [[Menu]] component.
Floating label
- Floating label: An optional text label that transitions from an in-field placeholder to a label above the field when focused or filled.
Multiple selection
- Selected option tag: An element which represents the selected option. It is the [[Tag]] component.
- Count badge: An badge which indicates the number of selected options.
States
Field
Interaction states
Enabled
- Interaction with the select field is available.
Hovered
- The cursor is currently positioned over the select field, indicated by the text cursor and a slightly different border color.
Focused
- The select field is focused via keyboard or mouse interaction, indicated by a thickened border.
Read-only
- The selected input value is displayed but the select field is not interactive.
[!missing] Missing specification for multi-select
Disabled
- Interaction with the input field is disallowed, indicated by a muted appearance.
Value states
Unselected
- The field does not contain any input value.
Selected
- The field contains some input value.
Invalid
- The input value does not meet specified criteria, indicated by a red border color and an error message.
Dropdown menu
This sub-component has the same states as [[Menu]].
Clear button
This sub-component has the same states as [[Button]].
Selected option tag
This sub-component has the same states as [[Tag]].
Options
Field options
Layering
- Selects are available in default or alternative [[Layering]].
- The Layering option chosen also affects the dropdown menu.
Size
- Selects are available in small and medium sizes that differ in field height.
- Medium is the default select size.
Floating label
- A label can be optionally included within the select field, which will increase its height.
- The label is maximized within the middle of the field in the unselected state and the select field has not received focus.
- The label is minimized and floats towards the top when the select field receives focus.
Placeholder
- A placeholder text can be optionally displayed for the purpose of providing the user a selection hint.
Clear button
- A clear button can be added to the select field to allow quick clearing of the entered value when clicked.
Icon
- An icon can be optionally added to the leftmost position within the select field.
Multiple selection
- Selects can be optionally configured to allow multiple selections.
- Selected options are displayed as tags within the select field.
Dropdown menu options
The dropdown menu sub-component inherits all available options of the [[Menu#Options|Menu]] component.
Behaviors
Tags overflow
- When there is insufficient space to display all tags of a multiple selection select, tags are replaced with a count badge indicating the number of options currently selected.
[!missing] Section is incomplete