开发预览更新于 2026-05-10

Radio 单选框

单选框 —— Radio + RadioGroup 组合，单选互斥、键盘可达。

基础用法

RadioGroup 通过 provide / Context 把 value、name、size、disabled 注入到子项。任一子项被选中时回调 update:modelValue / onChange。

FreeProTeam

已选：pro

<script setup lang="ts">
import { ref } from 'vue';
import { CfRadio, CfRadioGroup } from '@chufix-design/vue';

const plan = ref<'free' | 'pro' | 'team'>('pro');
</script>

<template>
<CfRadioGroup v-model="plan" name="plan">
  <CfRadio value="free">Free</CfRadio>
  <CfRadio value="pro">Pro</CfRadio>
  <CfRadio value="team">Team</CfRadio>
</CfRadioGroup>
</template>

import { useState } from 'react';
import { CfRadio, CfRadioGroup } from '@chufix-design/react';

export default function Demo() {
const [plan, setPlan] = useState<'free' | 'pro' | 'team'>('pro');
return (
  <CfRadioGroup value={plan} name="plan" onChange={(v) => setPlan(v as any)}>
    <CfRadio value="free">Free</CfRadio>
    <CfRadio value="pro">Pro</CfRadio>
    <CfRadio value="team">Team</CfRadio>
  </CfRadioGroup>
);
}

排列方向

direction="column" 把选项垂直排开。在选项较多或文案较长时使用。

香草巧克力草莓（缺货）抹茶

<CfRadioGroup v-model="flavor" direction="column">
<CfRadio value="vanilla">香草</CfRadio>
<CfRadio value="chocolate">巧克力</CfRadio>
<CfRadio value="strawberry" disabled>草莓（缺货）</CfRadio>
<CfRadio value="matcha">抹茶</CfRadio>
</CfRadioGroup>

<CfRadioGroup value={flavor} direction="column" onChange={setFlavor}>
<CfRadio value="vanilla">香草</CfRadio>
<CfRadio value="chocolate">巧克力</CfRadio>
<CfRadio value="strawberry" disabled>草莓（缺货）</CfRadio>
<CfRadio value="matcha">抹茶</CfRadio>
</CfRadioGroup>

尺寸

size 设在 RadioGroup 上，注入给所有子项。

<CfRadioGroup size="sm" v-model="a">
<CfRadio value="s">Small</CfRadio>
<CfRadio value="t">Tiny</CfRadio>
</CfRadioGroup>
<CfRadioGroup size="md" v-model="b">…</CfRadioGroup>
<CfRadioGroup size="lg" v-model="c">…</CfRadioGroup>

<CfRadioGroup size="sm" value={a} onChange={setA}>
<CfRadio value="s">Small</CfRadio>
<CfRadio value="t">Tiny</CfRadio>
</CfRadioGroup>

事件与表单

change 会返回选中的值，同时透出 name、checked 与原生事件，适合表单联动、埋点、权限策略切换等场景。事件从 RadioGroup 发出时，meta 来自实际触发的子项。

华东节点 · 低延迟欧洲节点 · 合规隔离美西节点 · 灰度发布

切换区域后会显示 value、name 与 checked。

<script setup lang="ts">
import { ref } from 'vue';
import { CfRadio, CfRadioGroup } from '@chufix-design/vue';

const region = ref('cn');
</script>

<template>
<CfRadioGroup v-model="region" name="deploy-region" @change="(value, meta) => console.log(value, meta.name)">
  <CfRadio value="cn">华东节点</CfRadio>
  <CfRadio value="eu">欧洲节点</CfRadio>
  <CfRadio value="us">美西节点</CfRadio>
</CfRadioGroup>
</template>

<CfRadioGroup
value={region}
name="deploy-region"
onChange={(value, meta) => {
  setRegion(value as string);
  console.log(meta.name, meta.checked);
}}
>
<CfRadio value="cn">华东节点</CfRadio>
<CfRadio value="eu">欧洲节点</CfRadio>
<CfRadio value="us">美西节点</CfRadio>
</CfRadioGroup>

API

RadioGroup

Prop	类型	默认值	说明
`value`	`string \| number \| boolean \| null`	`null`	当前选中值
`name`	`string`	—	透传给底层 input 用于表单提交
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	整组尺寸
`disabled`	`boolean`	`false`	整组禁用
`direction`	`'row' \| 'column'`	`'row'`	排列方向

Radio

Prop	类型	默认值	说明
`value`	`string \| number \| boolean \| null`	—	单项的值
`disabled`	`boolean`	`false`	单独禁用此项（叠加 RadioGroup.disabled）

Events

事件	载荷	说明
`change` / `onChange`	`(value, meta)`	选中值变化；`meta` 包含 `event`、`value`、`name`、`checked`
`focus` / `onFocus`	`(event)`	单个 Radio 获得焦点
`blur` / `onBlur`	`(event)`	单个 Radio 失去焦点

Radio 也可以脱离 RadioGroup 独立使用，自行管理 v-model / checked + onChange。