Radio 单选框

从少量互斥选项中选择单个选项

何时使用

  • 需要在一组互斥选项中选择一项时。
  • 选项较少、需要全部展示时。

导入

import { Radio, RadioGroup } from "@reglow/reui";

基础用法

用户使用单选框来从少量的选项集合中选择单个选项。选项数量较少（通常 ≤ 5 个）时使用单选框，选项较多时建议使用 Select 下拉选择。

<script setup>
import { ref } from "vue";
import { Radio } from "@reglow/reui";

const checked = ref(false);
</script>

<template>
  <Radio v-model:checked="checked" name="demo">Radio</Radio>
</template>

带辅助文本

通过 extra 设置辅助文本。

<template>
  <Radio extra="这是一段辅助说明文字" name="demo">
    Semi Design
  </Radio>
</template>

禁用

<template>
  <Radio disabled>Disabled</Radio>
  <Radio :default-checked="true" disabled>Disabled Checked</Radio>
</template>

高级模式

高级模式（mode="advanced"）checked 可以通过点击转换为 unchecked。

<script setup>
import { ref } from "vue";
const checked = ref(true);
</script>

<template>
  <Radio v-model:checked="checked" mode="advanced">允许取消选择</Radio>
</template>

单选组合

一组互斥的 Radio 配合使用。

<script setup>
import { ref } from "vue";
import { RadioGroup, Radio } from "@reglow/reui";

const value = ref(1);
</script>

<template>
  <RadioGroup v-model="value">
    <Radio :value="1">A</Radio>
    <Radio :value="2">B</Radio>
    <Radio :value="3">C</Radio>
    <Radio :value="4">D</Radio>
  </RadioGroup>
</template>

垂直排列

通过 direction 属性控制排列方向。

<template>
  <RadioGroup v-model="value" direction="vertical">
    <Radio :value="1">A</Radio>
    <Radio :value="2">B</Radio>
    <Radio :value="3">C</Radio>
  </RadioGroup>
</template>

按钮样式

使用 type="button" 设置按钮样式，支持三种尺寸。

<template>
  <div class="flex flex-col gap-3">
    <RadioGroup v-model="value" type="button" button-size="small">
      <Radio :value="1">即时推送</Radio>
      <Radio :value="2">定时推送</Radio>
      <Radio :value="3">动态推送</Radio>
    </RadioGroup>
    <RadioGroup v-model="value" type="button" button-size="middle">
      <Radio :value="1">即时推送</Radio>
      <Radio :value="2">定时推送</Radio>
      <Radio :value="3">动态推送</Radio>
    </RadioGroup>
    <RadioGroup v-model="value" type="button" button-size="large">
      <Radio :value="1">即时推送</Radio>
      <Radio :value="2">定时推送</Radio>
      <Radio :value="3">动态推送</Radio>
    </RadioGroup>
  </div>
</template>

卡片样式

使用 type="card" 实现带有背景的卡片样式。

<template>
  <RadioGroup v-model="value" type="card" direction="vertical" class="w-[280px]">
    <Radio :value="1" extra="Semi Design 是设计系统" disabled>选项一</Radio>
    <Radio :value="2" extra="Semi Design 是设计系统">选项二</Radio>
    <Radio :value="3" extra="Semi Design 是设计系统">选项三</Radio>
  </RadioGroup>
</template>

纯卡片样式

使用 type="pureCard" 实现无 radio 圆点的纯卡片样式。

<template>
  <RadioGroup v-model="value" type="pureCard" direction="vertical" class="w-[280px]">
    <Radio :value="1" extra="描述文本">选项一</Radio>
    <Radio :value="2" extra="描述文本">选项二</Radio>
    <Radio :value="3" extra="描述文本">选项三</Radio>
  </RadioGroup>
</template>

配置 options

通过 options 参数渲染单选框。

<script setup>
import { ref } from "vue";
import { RadioGroup } from "@reglow/reui";

const value = ref("Guest");
const options = [
  { label: "Guest", value: "Guest" },
  { label: "Developer", value: "Developer" },
  { label: "Maintainer", value: "Maintainer", disabled: true },
];
</script>

<template>
  <RadioGroup v-model="value" :options="options" />
</template>

options + 卡片样式

<script setup>
const options = [
  { label: "选项一", value: "1", extra: "描述文字" },
  { label: "选项二", value: "2", extra: "描述文字" },
  { label: "选项三", value: "3", extra: "描述文字" },
];
</script>

<template>
  <RadioGroup v-model="value" type="card" :options="options" direction="vertical" class="w-[280px]" />
</template>

API

Radio Props

参数说明类型默认值
value选项值string | number-
checked是否选中boolean-
defaultChecked初始是否选中booleanfalse
disabled是否禁用booleanfalse
extra副文本string-
type样式类型default | button | card | pureCarddefault
mode高级模式advanced-
namename 属性string-
class附加类名string-

Radio Events

事件说明回调参数
change选项变化回调(e: Event)
click点击回调(e: MouseEvent)

Radio Slots

名称说明
defaultRadio 内容
extra副文本

RadioGroup Props

参数说明类型默认值
modelValue (v-model)当前值string | number-
defaultValue默认值string | number-
direction排列方向horizontal | verticalhorizontal
type样式类型default | button | card | pureCarddefault
buttonSize按钮尺寸small | middle | largemiddle
disabled禁用所有booleanfalse
namename 属性string-
optionsoptions 配置RadioOption[]-
mode高级模式advanced-
class附加类名string-

RadioGroup Events

事件说明回调参数
change选项变化回调(e: Event)

RadioOption

参数说明类型默认值
label显示文本string-
value值string | number-
disabled是否禁用booleanfalse
extra副文本string-
class附加类名string-

类型对照

type说明
default默认圆形单选框
button按钮样式
card卡片样式（带 radio 圆点）
pureCard纯卡片样式（无 radio 圆点）
NativeSelect 原生选择器
基于原生 `<select>` 的样式化封装，搭配 `NativeSelectOption` / `NativeSelectOptGroup` 使用。
Rate 评分
对事物进行评级的星形组件