/*! For license information please see 9563.545fa3bc.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["9563"],{44343:function(s,a,n){"use strict";n.r(a);var t=n("80681");let l=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Radio

\n

Intro

\n

Single selection among multiple options.

\n

Install

\n

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

\n
import { createApp } from 'vue';\nimport { RadioGroup, Radio } from 'vant';\n\nconst app = createApp();\napp.use(Radio);\napp.use(RadioGroup);\n
\n

Usage

\n

Basic Usage

\n

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

\n
<van-radio-group v-model="checked">\n  <van-radio name="1">Radio 1</van-radio>\n  <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref('1');\n    return { checked };\n  },\n};\n
\n

Horizontal

\n
<van-radio-group v-model="checked" direction="horizontal">\n  <van-radio name="1">Radio 1</van-radio>\n  <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\n

Disabled

\n
<van-radio-group v-model="checked" disabled>\n  <van-radio name="1">Radio 1</van-radio>\n  <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\n

Custom Shape

\n
<van-radio-group v-model="checked" shape="square">\n  <van-radio name="1">Radio 1</van-radio>\n  <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n\n<van-radio-group v-model="checked" shape="dot">\n  <van-radio name="1">Radio 1</van-radio>\n  <van-radio name="2">Radio 2</van-radio>\n</van-radio-group>\n
\n

Custom Color

\n
<van-radio-group v-model="checked">\n  <van-radio name="1" checked-color="#ee0a24">Radio 1</van-radio>\n  <van-radio name="2" checked-color="#ee0a24">Radio 2</van-radio>\n</van-radio-group>\n
\n

Custom Icon Size

\n
<van-radio-group v-model="checked">\n  <van-radio name="1" icon-size="24px">Radio 1</van-radio>\n  <van-radio name="2" icon-size="24px">Radio 2</van-radio>\n</van-radio-group>\n
\n

Custom Icon

\n

Use icon slot to custom icon

\n
<van-radio-group v-model="checked">\n  <van-radio name="1">\n    Radio 1\n    <template #icon="props">\n      <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n    </template>\n  </van-radio>\n  <van-radio name="2">\n    Radio 2\n    <template #icon="props">\n      <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />\n    </template>\n  </van-radio>\n</van-radio-group>\n\n<style>\n  .img-icon {\n    height: 20px;\n  }\n</style>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const checked = ref('1');\n    return {\n      checked,\n      activeIcon:\n        'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',\n      inactiveIcon:\n        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',\n    };\n  },\n};\n
\n

Left Label

\n

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

\n
<van-radio-group v-model="checked">\n  <van-radio name="1" label-position="left">Radio 1</van-radio>\n  <van-radio name="2" label-position="left">Radio 2</van-radio>\n</van-radio-group>\n
\n

Disable Label Click

\n
<van-radio-group v-model="checked">\n  <van-radio name="1" label-disabled>Radio 1</van-radio>\n  <van-radio name="2" label-disabled>Radio 2</van-radio>\n</van-radio-group>\n
\n

Inside a Cell

\n
<van-radio-group v-model="checked">\n  <van-cell-group inset>\n    <van-cell title="Radio 1" clickable @click="checked = '1'">\n      <template #right-icon>\n        <van-radio name="1" />\n      </template>\n    </van-cell>\n    <van-cell title="Radio 2" clickable @click="checked = '2'">\n      <template #right-icon>\n        <van-radio name="2" />\n      </template>\n    </van-cell>\n  </van-cell-group>\n</van-radio-group>\n
\n

Types

\n

The component exports the following type definitions:

\n
import type {\n  RadioProps,\n  RadioShape,\n  RadioGroupProps,\n  RadioLabelPosition,\n  RadioGroupDirection,\n} from 'vant';\n
\n

API

\n

Radio Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
nameRadio name, usually a unique string or numberany-
shapeCan be set to square dotstringround
disabledWhether to disable radiobooleanfalse
label-disabledWhether to disable label clickbooleanfalse
label-positionCan be set to leftstringright
icon-sizeIcon sizenumber | string20px
checked-colorChecked colorstring#1989fa
\n

RadioGroup Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-modelName of checked radioany-
disabledDisable all radiosbooleanfalse
directionDirection, can be set to horizontalstringvertical
icon-sizeIcon size of all radiosnumber | string20px
checked-colorChecked color of all radiosstring#1989fa
shape v4.6.3Can be set to square dotstringround
\n

Radio Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionParameters
clickEmitted when radio is clickedevent: MouseEvent
\n

RadioGroup Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionParameters
changeEmitted when value changedname: string
\n

Radio Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionSlotProps
defaultCustom label{ checked: boolean, disabled: boolean }
iconCustom icon{ checked: boolean, disabled: boolean }
\n

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-radio-size20px-
--van-radio-dot-size8pxThe distance between the dot and the border
--van-radio-border-colorvar(--van-gray-5)-
--van-radio-durationvar(--van-duration-fast)-
--van-radio-label-marginvar(--van-padding-xs)-
--van-radio-label-colorvar(--van-text-color)-
--van-radio-checked-icon-colorvar(--van-primary-color)-
--van-radio-disabled-icon-colorvar(--van-gray-5)-
--van-radio-disabled-label-colorvar(--van-text-color-3)-
--van-radio-disabled-backgroundvar(--van-border-color)-
\n
'},null,8,l))}}}]);