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

Name	Description	Type	Default
model-value / v-model	binding value	`string` / `number` / `boolean`	—
value 2.6.0	the value of Radio	`string` / `number` / `boolean`	—
label	the label of Radio. If there's no `value`, `label` will act as `value`	`string` / `number` / `boolean`	—
disabled	whether Radio is disabled	`boolean`	false
border	whether to add a border around Radio	`boolean`	false
size	size of the Radio	`enum`	—
name	native `name` attribute	`string`	—

Radio Events

Name	Description	Type
change	triggers when the bound value changes	`Function`

Radio Slots

Name	Description
default	customize default content

RadioGroup API

RadioGroup Attributes

Name	Description	Type	Default
model-value / v-model	binding value	`string` / `number` / `boolean`	—
size	the size of radio buttons or bordered radios	`string`	default
disabled	whether the nesting radios are disabled	`boolean`	false
text-color	font color when button is active	`string`	#ffffff
fill	border and background color when button is active	`string`	#409eff
validate-event	whether to trigger form validation	`boolean`	true
label a11y	same as `aria-label` in RadioGroup	`string`	—
name	native `name` attribute	`string`	—
id	native `id` attribute	`string`	—

RadioGroup Events

Name	Description	Type
change	triggers when the bound value changes	`Function`

RadioGroup Slots

Name	Description	Subtags
default	customize default content	Radio / RadioButton

RadioButton API

RadioButton Attributes

Name	Description	Type	Default
value 2.6.0	the value of Radio	`string` / `number` / `boolean`	—
label	the label of Radio. If there's no `value`, `label` will act as `value`	`string` / `number` / `boolean`	—
disabled	whether Radio is disabled	`boolean`	false
name	native 'name' attribute	`string`	—