Select
When users need to select one or more items from a set of similar data, they can use a dropdown selector to click and choose the corresponding items.
When to use
Pop up a dropdown menu for the user to select an action, used to replace the native selector, or when a more elegant multi-selector is needed.
When there are few options (fewer than 3), it is recommended to lay out the options directly; using Radio is a better choice.
Basic selection box
Selection boxes are divided into 2 categories:
Down arrow selection box - click to show a drop-down menu or a pop-up window
Right arrow selection box - click to jump directly to a page
Defult
Down arrow
Defult
Right arrow
Select box size
There are four different sizes of selection boxes: Large, Default, Small, and Mini, to adapt to different size layouts.
Defult
Large: 48px
Defult
Default:40px
Defult
Small:32px
Defult
Mini:24px
Select box status
The checkbox has 3 states: default, selected, and disabled.
Defult
Default
Filled
Filled
Disable
Disable
Special selection box
Complex scenarios, such as transaction pages:
The selection box can be configured with an icon on the left.
The text in the selection box can be centered.
Defult
Defult
Click hot area
For the basic type selection box, clicking anywhere in the area will take effect.
For the selection box type with an icon, the icon area must have a hot zone set separately.
Basic type
Defult
All areas are clickable
with icon
Defult
icon hotspot
Pull-down hot area
Usage scenario
Down arrow selection box - Click to show a dropdown menu or popup
Right arrow selection box - Click to jump directly to a page
Please do not mix and match them incorrectly, such as clicking a right arrow selection box to show a popup, or clicking a down arrow selection box to jump to a page
1. Click to select the drop-down menu
3. Click the checkbox to jump to a new page.
2. Click to select the box to open the popup.
Recommended/Use with caution examples
When the text inside the selection box is extremely long, wrap the text instead of using ellipses directly.
The text should be displayed in a maximum of 2 lines; in extreme cases where it exceeds 2 lines, show "...".
Do
Don't
0x5c09a203ba6943c3eba4c8d6c825a8d8...
0x5c09a203ba6943c3eba4c8d6c825a8d882d09
There is a set spacing on both sides of the selection box for each size, and the spacing cannot be adjusted arbitrarily.
Do
Defult
Don't
Defult
To Designer
Component usage
Select the outermost layer of the component to switch types, states, dimensions, etc.
The switch can control text centering and whether to configure a prefix.
Selector
Drop-down selection
Selection box
Drop-down menu
Selection control