基础使用

苹果

香蕉

桃子

葡萄

当前选中值：

<script setup>
import { ref } from 'vue'
const val = ref('')
</script>

<template>
  <div class="c-row c-gutter-x-md">
    <c-radio v-model="val" label="苹果" value="Apple" />
    <c-radio v-model="val" label="香蕉" value="Banana" />
    <c-radio v-model="val" label="桃子" value="Peach" />
    <c-radio v-model="val" label="葡萄" value="Grape" />
  </div>
  <div class="c-mt-md">
    当前选中值：{{ val }}
  </div>
</template>

点击展开/收起代码

点击打开交互式编辑器

尺寸

超小尺寸

小尺寸

中等尺寸（默认）

大尺寸

超大尺寸

当前选中值：

<script setup>
import { ref } from 'vue'
const val = ref('')
</script>

<template>
  <div class="c-row c-gutter-x-md c-items-center">
    <c-radio
      v-model="val"
      label="超小尺寸"
      value="xs"
      size="xs"
    />
    <c-radio
      v-model="val"
      label="小尺寸"
      value="sm"
      size="sm"
    />
    <c-radio v-model="val" label="中等尺寸（默认）" value="md" />
    <c-radio
      v-model="val"
      label="大尺寸"
      value="lg"
      size="lg"
    />
    <c-radio
      v-model="val"
      label="超大尺寸"
      value="xl"
      size="xl"
    />
  </div>
  <div class="c-mt-md">
    当前选中值：{{ val }}
  </div>
</template>

点击展开/收起代码

点击打开交互式编辑器

状态

禁用态

禁用态

<script setup>
import { ref } from 'vue'
const val1 = ref(false)
const val2 = ref(true)
</script>

<template>
  <div class="c-row c-gutter-x-md">
    <c-radio v-model="val1" label="禁用态" disabled />
    <c-radio v-model="val2" label="禁用态" disabled />
  </div>
</template>

点击展开/收起代码

点击打开交互式编辑器

单选器组

Apple

苹果

香蕉

桃子

葡萄

<script setup>
import { ref } from 'vue'

const selectedFruit = ref('Apple')
const fruits = [
  { label: '苹果', value: 'Apple' },
  { label: '香蕉', value: 'Banana' },
  { label: '桃子', value: 'Peach' },
  { label: '葡萄', value: 'Grape' },
]
</script>

<template>
  {{ selectedFruit }}
  <c-radio-group v-model="selectedFruit" :options="fruits" />
</template>

点击展开/收起代码

点击打开交互式编辑器

CRadio API

Props

Events

modelValue

CRadioModel

*

当前值，用于v-model绑定用

value

CRadioModel

默认值  true

选中时的值

label

string | number

默认值  ''

文字

size

CSize

默认值  'md'

尺寸

disabled

boolean

默认值  false

是否禁用

CRadioGroup API

Props

Events

modelValue

boolean | string | number

*

当前值，用于v-model绑定用

options

Array<{ value: string | number; label: string }>

*

选项数组

size

CSize

默认值  'md'

尺寸

gutterSize

CSize

默认值  'md'

单选器之间的间距