Radio

<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>
);
}

<CfRadioGroup v-model="flavor" direction="column">
<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>

<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>

<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>