Select
Information entry component for accommodating a large number of options.
Anatomy
1
3
2
4
5
Title
Select
Additional prompts will wrap in width when the text is too long.
6
1: Title
Optional
2: Copywriting
Optional, usually a prompt for the selector or the content of the selector. If there is a default option, you may omit the prompt.
3: Container
Must have, used for the content of the selector.
4: Superscript
Must have, used to display the expanded/collapsed state of the selector.
4: Auxiliary copy
Optional, but must appear in case of an error.
Variant/Type
Single choice
Multiple selection
With icon
Select
Tag1
Tag2
Tag2
+2...
Select
Usage scenario
Select
Interaction
Select
Default
At this time, the selector is in an inactive state and has not interacted with the user.
Select
Hover
When the cursor hovers over the selector, the outline fades out.
Select
Focus
This is the state where the user has clicked the selector but has not yet made a selection, and the border color turns blue.
Select
Filled
This is the status after the user has made a selection.
Select
Disable
For some reason, users are unable to make a selection. Although there is content that has been selected in the field, it will appear dimmed afterward. Even if the area is selected, it will not gain focus.
Select
Additional prompts will wrap in width when the text is too long.
Error
This is the content selected by the user that does not match the conditions, displaying a red outline. If the user continues to click this area, it will return to the Focus state, allowing the user to continue selecting.
Label
8px
12px
8px
8px
Title
Select
Additional prompts will wrap in width when the text is too long.
Multilingual adaptation
Title
Select
Title
1238947612834612839461829364182364812123123123331212312312364
Decrease font size + truncate
In the selector, when the content is too long, the font size will be reduced down to a minimum of 10px. If it is still too long, it will be truncated with an ellipsis at the end.
RTL
Title
Select
LTR
Title
Select
RTL
Title
Select
Additional prompts will wrap in width when the text is too long.
LTR
Title
Select
Additional prompts will wrap in width when the text is too long.
RTL
Usage
Title
Select
The condition is invalid, please reselect.
Do
Title
Select
Select error
Don't
The error message description needs to be accurate.