Dropdown
Typically a dropdown list, displayed as a clickable button or text. When clicked or hovered over by the user, a list pops up below or above it, from which the user can select an option. The dropdown menu usually does not display the selected option's text.
Anatomy
Please enter content
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
2
1
5
6
3
4
1: Prefix
Optional
2. Search bar
Optional; it is recommended to include search when there are more than 7 options.
3: Container
There must be
4: Scrollbar
Appears when there are more than 7 options
5: Text
must have
6: Suffix
Optional
Type/Variant
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
123456
No orders yet
Basic Radio
Prefix Radio Button
Prefix/Suffix Single Choice
Suffix Single Select
Multiple selection
No results
Custom
+Slot
+Slot
+Slot
Supplement
When the basic dropdown menu does not meet the business scenario, business designers are supported in customizing the content of the dropdown menu, maintaining 8px padding on the top, bottom, left, and right of the container.
Note: After ungrouping and customizing, it is necessary to explain to the development team that the infrastructure dropdown component should be used.
Usage scenario
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Label
Texttext
Text
Please enter content
Texttext
Text
Texttext
Text
Texttext
Text
Select
Please enter content
Texttext
Text
Texttext
Text
Texttext
Text
detailed product descriptions}
8
detailed product descriptions}
8
8
8
detailed product descriptions}
8
detailed product descriptions}
8
detailed product descriptions}
8
detailed product descriptions}
8
8
Supplement
When used in combination with a selector, the spacing from the selector is 8 px
Multilingual adaptation
TexttextTextt…
Text
TexttextTextt…
Text
Texttext
Text
Texttext
Text
Texttext
Text
Texttext
Text
Supplement
The width of the dropdown menu is generally defined by the designer based on the actual scenario. Once the width is set, any text in the dropdown menu that is too long will be truncated at the end with an ellipsis...
RTL
Please enter content
Texttext
Text
Texttext
Text
Texttext
Text
LTR
Please enter content
text
text
Sort
Futures Ranking
text
text
RTL
Usage
Please enter content
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Do
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Texttext
Caution
When there are too many options, it is recommended to use them with a search function, and it is not recommended to display more than 7 options at once.