Radio - Vant 4

Radio

Intro

Single selection among multiple options.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { RadioGroup, Radio } from'vant'; const app = createApp(); app.use(Radio); app.use(RadioGroup);

Usage

Basic Usage

Use v-model to bind the name of checked radio.

import { ref } from'vue'; exportdefault { setup() { const checked = ref('1'); return { checked }; }, };

Horizontal

Disabled

Custom Shape

Custom Color

Custom Icon Size

Custom Icon

Use icon slot to custom icon

import { ref } from'vue'; exportdefault { setup() { const checked = ref('1'); return { checked, activeIcon: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png', inactiveIcon: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png', }; }, };

Left Label

Set label-position prop to 'left' to adjust the label position to the left of the Radio.

Disable Label Click

Inside a Cell

Types

The component exports the following type definitions:

importtype { RadioProps, RadioShape, RadioGroupProps, RadioLabelPosition, RadioGroupDirection, } from'vant';

API

Radio Props

Attribute	Description	Type	Default
name	Radio name, usually a unique string or number	any	-
shape	Can be set to square``dot	string	round
disabled	Whether to disable radio	boolean	false
label-disabled	Whether to disable label click	boolean	false
label-position	Can be set to left	string	right
icon-size	Icon size	*number	string*
checked-color	Checked color	string	#1989fa

RadioGroup Props

Attribute	Description	Type	Default
v-model	Name of checked radio	any	-
disabled	Disable all radios	boolean	false
direction	Direction, can be set to horizontal	string	vertical
icon-size	Icon size of all radios	*number	string*
checked-color	Checked color of all radios	string	#1989fa

| shape v4.6.3 | Can be set to square``dot | string | round |

Radio Events

Event	Description	Parameters
click	Emitted when radio is clicked	event: MouseEvent

RadioGroup Events

Event	Description	Parameters
change	Emitted when value changed	name: string

Radio Slots

Name	Description	SlotProps
default	Custom label	{ checked: boolean, disabled: boolean }
icon	Custom icon	{ checked: boolean, disabled: boolean }

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-radio-size	20px	-
--van-radio-dot-size	8px	The distance between the dot and the border
--van-radio-border-color	var(--van-gray-5)	-
--van-radio-duration	var(--van-duration-fast)	-
--van-radio-label-margin	var(--van-padding-xs)	-
--van-radio-label-color	var(--van-text-color)	-
--van-radio-checked-icon-color	var(--van-primary-color)	-
--van-radio-disabled-icon-color	var(--van-gray-5)	-
--van-radio-disabled-label-color	var(--van-text-color-3)	-
--van-radio-disabled-background	var(--van-border-color)	-