Checkbox
Multiple selections in a set of options
Anatomy
Content
1
1: Checkbox
Must have, display selected state
2:text
Required, capitalized, defines the textual description of the option
2
Variant/Type
Content
active
Content
active-selected
Content
disabled
Content
disabled-selected
Usage scenario
content
Button
Content
Content
Content
Interaction
Content
Default
The initial or non-interactive state of the component
Content
Selected
The current content has been selected by the user.
Content
Disabled
Indicates options that are currently non-interactive or unavailable.
Content
Disabled
Indicates options that are currently non-interactive or unavailable.
Label
md-16
sm-14
Content
Content
20px
16px
16px
8px
14 pixels
8px
Multilingual adaptation
Content
内容 内容 内容 内容 内容
Default state
Super long processing
Instructions:
Wrap text, and it is recommended to display a maximum of two lines. If it exceeds 2 lines, simplify the copy.
Due to the different usage scenarios of checkboxes, the line break rules should be marked by the designer on the design draft.
Align top or align left
RTL
Quantity
LTR
Quantity/Amount
RTL
Usage
复选框文本太长，需要换行显示
Do
复选框文本太长，需要换行显示
Don't
The text content that needs to wrap should always align the checkbox with the top of the text.