Radio

Single selection among multiple options.

Basic usage

Radio should not have too many options. Otherwise, use the Select component instead.

Creating a radio component is easy, you just need to bind a variable to Radio's v-model. It equals to the value of label of the chosen radio. The type of label is String, Number or Boolean.

Disabled

disabled attribute is used to disable the radio.

Radio Group

Suitable for choosing from some mutually exclusive options.

Icon style

Radio with icon style

Button style

Radio with button style

Segment style

Radio with segment style

Radio Attributes

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	binding value	string / number / boolean	—	—
value	the value of Radio	string / number / boolean	—	—
label	the display label of Radio	string	—	—
disabled	whether Radio is disabled	boolean	—	false
size	size of the Radio	string	large / default /small	—
name	native 'name' attribute	string	—	—

Radio Events

Event Name	Description	Parameters
change	triggers when the bound value changes	the label value of the chosen radio

Radio Slots

Name	Description
—	customize default label
sub	customize default substitution text
icon	customize default icon

Radio-Group Attributes

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	binding value	string / number / boolean	—	—
size	the size of radio	string	large / default / small	default
large	the large size of radio	boolean	—	false
small	the small size of radio	boolean	—	false
segment	segment style	boolean	—	false
disabled	whether the nesting radios are disabled	boolean	—	false
validate-event	whether to trigger form validation	boolean	-	true

Radio-Group Events

Event Name	Description	Parameters
change	triggers when the bound value changes	the label value of the chosen radio

Radio-Group Slots

Name	Description	Subtags
—	customize default content	Radio / Radio-button

Radio-Button Attributes

Attribute	Description	Type	Accepted Values	Default
value	the value of radio	string / number	—	—
label	the label of Radio	string	—	—
disabled	whether radio is disabled	boolean	—	false
name	native 'name' attribute	string	—	—
segment	segment style	boolean	—	false

Radio-Button Slots

Name	Description
—	customize default content