Dropdowns allow users to select one item at a time, or multiple items, by triggering a selection menu.
In case the user can select multiple items, the menu will have checkboxes. On the other hand, the options need only to be ticked if it is a one-option dropdown.
Dropdown used in Ottilia
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Dropdown |
High emphasis element. Commonly used in forms or other moments in the journey where the user needs to provide or select information. |
Inside the container |
Click to open the dropdown list |
|
Inline dropdown |
Low emphasis element. Commonly used in a context of a results list. |
Inside the container |
Click to open the dropdown list |
Anatomy
Structure
|
|
|
|
|
|
|
|
|
label |
Indicates the name of the information asked the user. |
|
input |
The box where the interaction happens. |
|
placeholder |
The inner text should display a short instruction to the user. |
|
arrow |
Indicates if the dropdown is open or closed. |
|
hint |
Used to show assistive information or any requirement that causes fail/success. |
|
list |
Shows the options for the user to select. |
|
list item |
Row element of the list. Can be multiple or single selection. |
|
selection indicator |
Indicates the selected item of the list, when a single selection list is shown. |
|
checkbox |
Indicates the selected item(s) of the list, when a single selection list is shown. |
|
search input |
Allows the user to search within the displayed options. |
|
selection actions |
Allows the user to select all or clear all of the selected items. Only available for the multiple selection dropdown. |
Sizes and Spaces
|
The size of the list in the inline dropdown should be responsive to the content. If the elements of the list are smaller, the reference size should be the label of the inline dropdown
Paddings and margins should be respected. |
|
Size in dropdowns is flexible and they can vary accordingly with the need and the context.
Paddings and margins should be respected. |
|
List items (rows of the dropdowns) can be flexible or responsive to the content. Although, spacing between elements should always be respected |
Properties
Properties for dropdown
|
Property |
Value |
|---|---|
|
Size |
medium large |
|
State |
default disabled hover active error success read-only |
|
Filled |
true false |
|
Hint |
true false |
Properties for list
|
Property |
Value |
|
Size |
medium large |
|
Type |
text (single selection) text (multi selection) flag (single selection) flag (multi selection) |
|
State |
default disabled hover |
|
Selection Indicator |
true false |
|
Search |
true false |
Guidelines
|
|
⚠️ Caution
If there is only 1, or 2 options consider more effective switch components like checkboxes, buttons...
|
|