Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Field label |
Mandatory textual label used to describe the form field to guide users in filling it. |
No |
|
2. Required or optional marker |
Textual label used to denote if a field is required or optional. Marker’s copy is not changeable. |
Yes |
|
3. Popover trigger |
Icon used to signify a popover trigger in the context of forms, where helper text is not sufficient or suitable to provide additional information. |
Yes |
|
4. Helper text |
Additional description helping users provide the right input, if the field label is insufficient. |
Yes |
|
5. Field |
Select field that allows users to select multiple options out of several options. |
No |
|
6. Tag |
Tag used to display singular or a summary of multiple selected options. |
No |
|
7. Clear button |
Button clearing the selected option. Only available when there’s an option selected. |
Yes |
|
8. Suffix |
Icon signifying whether Select is open or closed. |
No |
|
9. Search field |
Search input that allows finding an option within the option list. |
Yes |
|
10. Select / Deselect option |
Singular selectable option in a form of a Checkbox that allows to select all or deselect all options below. |
No |
|
11. Option |
Singular selectable option built from Checkbox component. |
No |
|
12. Popover |
Scrollable select dropdown that can be pre-filled with multiple textual options. |
No |
|
13. Form validation |
Icon and text used when validating user form input to provide advice on fixing input errors and confirmation when they are addressed. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| state Variant | rest | focus | read-only | disabled | rest |
| validation Variant | neutral | error | neutral |
| isPopoverOpen Variant | false | true | false |
| ↳ selectedItems Variant | none | all | none |
Component dependencies
This component is internally dependent on the following form sub-components:
|
Figma |
Code |
|---|---|
|
formElement.labelGroup |
Legend |
|
formElement.input |
N/A |
|
formElement.select.optionList |
Combination of SelectDropdown, SearchInput and Listbox |
|
formElement.select.option |
SelectOption |
|
formElement.validation |
InputError |
Figma sub-components
It’s also dependent on:
System Icons
Our icon library with guidelines on using and adding icons
Button
Buttons allow users to take actions that will trigger a response.
Popover
Popover is a temporary overlay window that contains contextual information
Search Input
Search Input allows users to perform in-page content searches
Tag
Used to categorize, classify or filter corresponding object, or to communicate user-generated labeling.
Help and support