Radio 单选框

何时使用

在一组互斥选项中选择一项时使用。

基础用法

选项 A选项 B选项 C

<script setup lang="ts">
import { ref } from 'vue'
import { DanRadio, DanRadioGroup } from '@dandan-ui/ui'

const value = ref('a')
</script>

<template>
  <DanRadioGroup v-model="value">
    <DanRadio label="a">选项 A</DanRadio>
    <DanRadio label="b">选项 B</DanRadio>
    <DanRadio label="c">选项 C</DanRadio>
  </DanRadioGroup>
</template>

禁用

可选禁用项可选

整组禁用 A整组禁用 B

<script setup lang="ts">
import { ref } from 'vue'
import { DanRadio, DanRadioGroup } from '@dandan-ui/ui'

const value = ref('a')
</script>

<template>
  <div style="display: grid; gap: 12px">
    <DanRadioGroup v-model="value">
      <DanRadio label="a">可选</DanRadio>
      <DanRadio label="b" disabled>禁用项</DanRadio>
      <DanRadio label="c">可选</DanRadio>
    </DanRadioGroup>
    <DanRadioGroup v-model="value" disabled>
      <DanRadio label="a">整组禁用 A</DanRadio>
      <DanRadio label="b">整组禁用 B</DanRadio>
    </DanRadioGroup>
  </div>
</template>

API

Radio Props

属性	说明	类型	默认值	必填
modelValue / v-model	单独使用时的选中值	string | number | boolean	—	否
label	该单选项对应的值（Group 内必用）	string | number | boolean	—	组内建议必填
disabled	禁用当前项；可继承 Group / Form	boolean	false	否

Radio Events

事件名	说明	回调参数
update:modelValue	单独使用时的 v-model	(value: string | number | boolean) => void
change	选中变化	(value: string | number | boolean) => void

Radio Slots

插槽名	说明
default	选项文案；默认回退为 label

RadioGroup Props

属性	说明	类型	默认值	必填
modelValue / v-model	当前选中值	string | number | boolean	—	否
disabled	禁用整组	boolean	false	否

RadioGroup Events

事件名	说明	回调参数
update:modelValue	选中值更新	(value: string | number | boolean) => void
change	选择变化，并联动 FormItem	(value: string | number | boolean) => void

RadioGroup Slots

插槽名	说明
default	放置多个 DanRadio

与 Form 联用

推荐始终使用 DanRadioGroup + prop，由 Group 统一上报校验。