Radio 单选框

在一组备选项中进行单选。

基础用法

通过 RadioGroup 的 v-model 绑定选中值，Radio 的 value 设置选项值。

选项一选项二选项三

当前选中：1

<script setup>
import { ref } from 'vue'
import Radio from '@/vue/components/Radio/Radio.vue'
import RadioGroup from '@/vue/components/Radio/RadioGroup.vue'
const picked = ref('1')
</script>
<template>
  <RadioGroup v-model="picked">
    <Radio value="1" label="选项一" />
    <Radio value="2" label="选项二" />
    <Radio value="3" label="选项三" />
  </RadioGroup>
  <p style="margin-top: 10px; color: #606266;">当前选中：{{ picked }}</p>
</template>

禁用状态

在 RadioGroup 上设置 disabled 可以禁用整组单选框。

选项一选项二选项三

<script setup>
import { ref } from 'vue'
import Radio from '@/vue/components/Radio/Radio.vue'
import RadioGroup from '@/vue/components/Radio/RadioGroup.vue'
const picked = ref('1')
</script>
<template>
  <RadioGroup v-model="picked" disabled>
    <Radio value="1" label="选项一" />
    <Radio value="2" label="选项二" />
    <Radio value="3" label="选项三" />
  </RadioGroup>
</template>

不同尺寸

通过 size 属性设置单选框的大小。

大尺寸选项二

默认尺寸选项二

小尺寸选项二

<script setup>
import { ref } from 'vue'
import Radio from '@/vue/components/Radio/Radio.vue'
import RadioGroup from '@/vue/components/Radio/RadioGroup.vue'
const picked = ref('1')
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <RadioGroup v-model="picked" size="large">
      <Radio value="1" label="大尺寸" />
      <Radio value="2" label="选项二" />
    </RadioGroup>
    <RadioGroup v-model="picked">
      <Radio value="1" label="默认尺寸" />
      <Radio value="2" label="选项二" />
    </RadioGroup>
    <RadioGroup v-model="picked" size="small">
      <Radio value="1" label="小尺寸" />
      <Radio value="2" label="选项二" />
    </RadioGroup>
  </div>
</template>

React 用法

import { useState } from 'react'
import { Radio, RadioGroup } from '@bobocn/element/react'
import '@bobocn/element/style.css'

// 基础用法
function App() {
  const [value, setValue] = useState('1')

  return (
    <RadioGroup modelValue={value} onChange={setValue}>
      <Radio value="1">选项一</Radio>
      <Radio value="2">选项二</Radio>
      <Radio value="3">选项三</Radio>
    </RadioGroup>
  )
}

// 禁用整组
<RadioGroup modelValue={value} disabled onChange={setValue}>
  <Radio value="1">选项一</Radio>
  <Radio value="2">选项二</Radio>
</RadioGroup>

// 不同尺寸
<RadioGroup modelValue={value} size="large" onChange={setValue}>
  <Radio value="1">大尺寸</Radio>
  <Radio value="2">选项二</Radio>
</RadioGroup>

API

RadioGroup 属性 (Attributes)

属性名	说明	类型	默认值
modelValue / v-model	绑定值	string | number | boolean	—
disabled	是否禁用	boolean	false
name	原生 name 属性	string	—
size	单选框尺寸	'large' | 'default' | 'small'	'default'

RadioGroup 事件 (Events)

事件名	说明	回调参数
change	绑定值变化时触发	(value: string | number | boolean) => void

RadioGroup 插槽 (Slots)

插槽名	说明
default	Radio 组件

---

Radio 属性 (Attributes)

属性名	说明	类型	默认值
value	单选框的值	string | number | boolean	—
label	标签文字	string	—
disabled	是否禁用	boolean	false
name	原生 name 属性	string	—

Radio 插槽 (Slots)

插槽名	说明
default	自定义标签内容