Radio
Used to perform single selection from a preset set of options and present the selection results.
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
disabled
Content
disabled-selected
Usage scenario
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
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 button
Select box
Radio button
Radio control
Select button