Radio

Single selection among multiple options.

Basic usage

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

Disabled

disabled attribute is used to disable the radio.

Radio button group

Suitable for choosing from some mutually exclusive options.

Button style

Radio with button styles.

With borders

Radio Attributes

AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuestring / number / boolean
labelthe value of Radiostring / number / boolean
disabledwhether Radio is disabledbooleanfalse
borderwhether to add a border around Radiobooleanfalse
sizesize of the Radiostringmedium / small / mini
namenative 'name' attributestring

Radio Events

Event NameDescriptionParameters
changetriggers when the bound value changesthe label value of the chosen radio

Radio Slots

NameDescription
customize default content

Radio-group Attributes

AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuestring / number / boolean
sizethe size of radiostringmedium / small / mini
disabledwhether the nesting radios are disabledbooleanfalse
text-colorfont color when button is activestring#ffffff
fillborder and background color when button is activestring#409EFF

Radio-group Events

Event NameDescriptionParameters
changetriggers when the bound value changesthe label value of the chosen radio

Radio-group Slots

NameDescriptionSubtags
customize default contentRadio / Radio-button

Radio-button Attributes

AttributeDescriptionTypeAccepted ValuesDefault
labelthe value of radiostring / number
disabledwhether radio is disabledbooleanfalse
namenative 'name' attributestring

Radio-button Slots

NameDescription
customize default content