Preview Updated 2026-05-10

Radio

Radio + RadioGroup pair — mutually exclusive selection with full keyboard support.

Basic usage

RadioGroup injects value, name, size, and disabled into its children via provide / Context. When any child becomes selected it fires update:modelValue / onChange.

背景

FreeProTeam

已选：pro

src/App.vue

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

const plan = ref<'free' | 'pro' | 'team'>('pro');
</script>
<template>
  <div class="demo-stack">
    <CfRadioGroup v-model="plan" name="plan">
      <CfRadio value="free">Free</CfRadio>
      <CfRadio value="pro">Pro</CfRadio>
      <CfRadio value="team">Team</CfRadio>
    </CfRadioGroup>
    <p class="demo-hint">已选：<code>{{ plan }}</code></p>
  </div>
</template>

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

const plan = ref<'free' | 'pro' | 'team'>('pro');
</script>
<template>
  <div class="demo-stack">
    <CfRadioGroup v-model="plan" name="plan">
      <CfRadio value="free">Free</CfRadio>
      <CfRadio value="pro">Pro</CfRadio>
      <CfRadio value="team">Team</CfRadio>
    </CfRadioGroup>
    <p class="demo-hint">已选：<code>{{ plan }}</code></p>
  </div>
</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>
);
}

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)}>
    <CfRadio value="free">Free</CfRadio>
    <CfRadio value="pro">Pro</CfRadio>
    <CfRadio value="team">Team</CfRadio>
  </CfRadioGroup>
);
}

Layout direction

direction="column" lays the options out vertically. Useful when you have many options or longer labels.

背景

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

src/App.vue

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

const flavor = ref('vanilla');
</script>
<template>
  <CfRadioGroup v-model="flavor" direction="column">
    <CfRadio value="vanilla">香草</CfRadio>
    <CfRadio value="chocolate">巧克力</CfRadio>
    <CfRadio value="strawberry" disabled>草莓（缺货）</CfRadio>
    <CfRadio value="matcha">抹茶</CfRadio>
  </CfRadioGroup>
</template>

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

const flavor = ref('vanilla');
</script>
<template>
  <CfRadioGroup v-model="flavor" direction="column">
    <CfRadio value="vanilla">香草</CfRadio>
    <CfRadio value="chocolate">巧克力</CfRadio>
    <CfRadio value="strawberry" disabled>草莓（缺货）</CfRadio>
    <CfRadio value="matcha">抹茶</CfRadio>
  </CfRadioGroup>
</template>

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

export default function Demo() {
  const [flavor, setFlavor] = useState('vanilla');
  return (
    <>
      <CfRadioGroup value={flavor} direction="column" onChange={setFlavor}>
      <CfRadio value="vanilla">Vanilla</CfRadio>
      <CfRadio value="chocolate">Chocolate</CfRadio>
      <CfRadio value="strawberry" disabled>Strawberry (out of stock)</CfRadio>
      <CfRadio value="matcha">Matcha</CfRadio>
      </CfRadioGroup>
    </>
  );
}

Sizes

Set size on RadioGroup to apply it to every child.

src/App.vue

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

const a = ref('s');
const b = ref('m');
const c = ref('l');
</script>
<template>
  <div class="demo-stack">
    <CfRadioGroup v-model="a" size="sm">
      <CfRadio value="s">Small</CfRadio>
      <CfRadio value="t">Tiny</CfRadio>
    </CfRadioGroup>
    <CfRadioGroup v-model="b" size="md">
      <CfRadio value="m">Medium</CfRadio>
      <CfRadio value="r">Regular</CfRadio>
    </CfRadioGroup>
    <CfRadioGroup v-model="c" size="lg">
      <CfRadio value="l">Large</CfRadio>
      <CfRadio value="x">Extra Large</CfRadio>
    </CfRadioGroup>
  </div>
</template>

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

const a = ref('s');
const b = ref('m');
const c = ref('l');
</script>
<template>
  <div class="demo-stack">
    <CfRadioGroup v-model="a" size="sm">
      <CfRadio value="s">Small</CfRadio>
      <CfRadio value="t">Tiny</CfRadio>
    </CfRadioGroup>
    <CfRadioGroup v-model="b" size="md">
      <CfRadio value="m">Medium</CfRadio>
      <CfRadio value="r">Regular</CfRadio>
    </CfRadioGroup>
    <CfRadioGroup v-model="c" size="lg">
      <CfRadio value="l">Large</CfRadio>
      <CfRadio value="x">Extra Large</CfRadio>
    </CfRadioGroup>
  </div>
</template>

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

export default function Demo() {
  const [a, setA] = useState('s');
  return (
    <>
      <CfRadioGroup size="sm" value={a} onChange={setA}>
      <CfRadio value="s">Small</CfRadio>
      <CfRadio value="t">Tiny</CfRadio>
      </CfRadioGroup>
    </>
  );
}

API

RadioGroup

Prop	Type	Default	Description
`value`	`string \| number \| boolean \| null`	`null`	Currently selected value
`name`	`string`	—	Forwarded to the underlying input for form submission
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Group size
`disabled`	`boolean`	`false`	Disable the whole group
`direction`	`'row' \| 'column'`	`'row'`	Layout direction

Radio

Prop	Type	Default	Description
`value`	`string \| number \| boolean \| null`	—	The item’s value
`disabled`	`boolean`	`false`	Disable this item only (combined with RadioGroup.disabled)

Radio can also be used standalone outside a RadioGroup, managing its own v-model / checked + onChange.