Radio
The radio button represents selecting only one option from a group of mutually exclusive options.
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
Title
Button
Button
Content
Content
Content
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
ContentContentContentContentContentContent
Default state
Super long processing
Instructions:
Wrap lines, and it is recommended to display a maximum of two lines. If it exceeds 2 lines, simplify the copy.
Due to the varying usage scenarios of Radio, the line-breaking rules are annotated by the designer on the design draft.
Align top or align left
RTL
UTC Time
LTR
Coordinated Universal Time
RTL
Usage
The Radio text is too long and needs to be displayed in a line break
Do
The Radio text is too long and needs to be displayed in a line break
Don't
The text content that needs to wrap should always align the checkbox with the top of the text.
Prompt sound
Open
Close
Caution
Prompt sound
Do
It is not recommended to use a radio button to enable/disable a feature; it is better to use a switch component.
Radio box
Selection box
Radio button
Radio control
Selection button