Radio

WARNING

label act as value has been deprecated, label is used only as display text, this action will be removed in 3.0.0, consider switching to new API.

New API value has been added in 2.6.0, you can use value API to set the value of 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 API

Radio Attributes

NameDescriptionTypeDefault
model-value / v-modelbinding valuestring / number / boolean
value 2.6.0the value of Radiostring / number / boolean
labelthe label of Radio. If there's no value, label will act as valuestring / number / boolean
disabledwhether Radio is disabledbooleanfalse
borderwhether to add a border around Radiobooleanfalse
sizesize of the Radioenum
namenative name attributestring

Radio Events

NameDescriptionType
changetriggers when the bound value changesFunction

Radio Slots

NameDescription
defaultcustomize default content

RadioGroup API

RadioGroup Attributes

NameDescriptionTypeDefault
model-value / v-modelbinding valuestring / number / boolean
sizethe size of radio buttons or bordered radiosstringdefault
disabledwhether the nesting radios are disabledbooleanfalse
text-colorfont color when button is activestring#ffffff
fillborder and background color when button is activestring#409eff
validate-eventwhether to trigger form validationbooleantrue
label a11y deprecatedsame as aria-label in RadioGroupstring
aria-label a11y 2.7.2same as aria-label in RadioGroupstring
namenative name attributestring
idnative id attributestring

RadioGroup Events

NameDescriptionType
changetriggers when the bound value changesFunction

RadioGroup Slots

NameDescriptionSubtags
defaultcustomize default contentRadio / RadioButton

RadioButton API

RadioButton Attributes

NameDescriptionTypeDefault
value 2.6.0the value of Radiostring / number / boolean
labelthe label of Radio. If there's no value, label will act as valuestring / number / boolean
disabledwhether Radio is disabledbooleanfalse
namenative 'name' attributestring

RadioButton Slots

NameDescription
defaultcustomize default content

Source

ComponentDocs

Contributors