Checkbox
The checkbox is a selection control that allows users to toggle between selected and unselected by clicking.
Anatomy
Content
1
1: Checkbox
Must have, display selected state
2:text
Must have, define option text description
2
Variant/Type
Content
active
Content
active-selected
Content
hover
Content
disabled
Content
disabled-selected
Usage scenario
Content
Content
Content
Title
Content
Button
Button
Interaction
Content
Default
The initial or non-interactive state of the component
Content
Hover
The temporary state when the mouse hovers over a component, indicating the possibility of a click by the user.
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
The Checkbox text is too long and needs to be wrapped onto a new line
Do
The Checkbox text is too long and needs to be wrapped onto a new line
Don't
The text content that needs to wrap should always align the checkbox with the top of the text.
Checkbox
Check box
Tick box
Check button
Selection box