iDesign

Radio 单选框

单选框代表从一组互斥的选项中仅选择一个选项。

单选框

最简单的单选框形式。

<template>
  <div className="idesign-demo-block-column">
    <i-radio>无默认值</i-radio>
    <i-radio :defaultChecked="checked">有默认值（非受控）</i-radio>
    <i-radio :modelValue="checked">有固定值（受控）</i-radio>
    <i-radio :modelValue="checked" @change="handleChange">
      通用方法
    </i-radio>
    <i-radio v-model="checked">v-model 用法</i-radio>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const checked = ref(false)

const handleChange = (val, e) => {
  console.log(val, e)
  checked.value = val
}
</script>
显示代码

单选框组

使用 i-radio-group 可以包裹 i-radio 形成一组单选框组。

无默认值

有默认值（非受控）

有固定值（受控）

通用方法

v-model 用法

<template>
  <h4>无默认值</h4>
  <i-radio-group>
    <i-radio value="1">选项一</i-radio>
    <i-radio value="2">选项二</i-radio>
    <i-radio value="3">选项三</i-radio>
    <i-radio value="4">选项四</i-radio>
  </i-radio-group>
  <h4>有默认值（非受控）</h4>
  <i-radio-group :defaultChecked="checked">
    <i-radio value="1">选项一</i-radio>
    <i-radio value="2">选项二</i-radio>
    <i-radio value="3">选项三</i-radio>
    <i-radio value="4">选项四</i-radio>
  </i-radio-group>
  <h4>有固定值（受控）</h4>
  <i-radio-group :modelValue="checked">
    <i-radio value="1">选项一</i-radio>
    <i-radio value="2">选项二</i-radio>
    <i-radio value="3">选项三</i-radio>
    <i-radio value="4">选项四</i-radio>
  </i-radio-group>
  <h4>通用方法</h4>
  <i-radio-group :modelValue="checked" @change="handleChange">
    <i-radio value="1">选项一</i-radio>
    <i-radio value="2">选项二</i-radio>
    <i-radio value="3">选项三</i-radio>
    <i-radio value="4">选项四</i-radio>
  </i-radio-group>
  <h4>v-model 用法</h4>
  <i-radio-group v-model="checked">
    <i-radio value="1">选项一</i-radio>
    <i-radio value="2">选项二</i-radio>
    <i-radio value="3">选项三</i-radio>
    <i-radio value="4">选项四</i-radio>
  </i-radio-group>
</template>

<script setup>
import { ref } from 'vue'
const checked = ref('2')

const handleChange = (val, e) => {
  console.log(val, e)
  checked.value = val
}
</script>
显示代码

单选框（按钮型）

i-radio 提供 type 属性切换为按钮形式的单选框。

<template>
  <div className="idesign-demo-block-row">
    <i-radio type="radio-button">按钮型</i-radio>
    <i-radio defaultChecked type="radio-button">按钮型</i-radio>
  </div>
</template>
显示代码

单选框组（按钮型）

i-radio-group 提供 type 属性全局修改每一项为按钮型单选框。

<template>
  <i-radio-group type="radio-button">
    <i-radio value="1">选项一</i-radio>
    <i-radio value="2">选项二</i-radio>
    <i-radio value="3">选项三</i-radio>
    <i-radio value="4">选项四</i-radio>
  </i-radio-group>
</template>
显示代码

不同尺寸（按钮型）

i-radio 按钮形式的单选框提供 size 属性控制尺寸，i-radio-group 也有 size 属性可以全局控制每一项按钮单选框的尺寸。

<template>
  <div className="idesign-demo-block-column">
    <div className="idesign-demo-block-row">
      <i-radio type="radio-button" size="small">未选中</i-radio>
      <i-radio type="radio-button" size="medium">未选中</i-radio>
      <i-radio type="radio-button" size="large">未选中</i-radio>
    </div>

    <div className="idesign-demo-block-row">
      <i-radio-group type="radio-button" size="small">
        <i-radio value="1">选项一</i-radio>
        <i-radio value="2">选项二</i-radio>
        <i-radio value="3">选项三</i-radio>
      </i-radio-group>
    </div>

    <div className="idesign-demo-block-row">
      <i-radio-group type="radio-button" size="medium">
        <i-radio value="1">选项一</i-radio>
        <i-radio value="2">选项二</i-radio>
        <i-radio value="3">选项三</i-radio>
      </i-radio-group>
    </div>

    <div className="idesign-demo-block-row">
      <i-radio-group type="radio-button" size="large">
        <i-radio value="1">选项一</i-radio>
        <i-radio value="2">选项二</i-radio>
        <i-radio value="3">选项三</i-radio>
      </i-radio-group>
    </div>
  </div>
</template>
显示代码

禁用状态

i-radio 提供 disabled 属性控制单选框为禁用状态，i-radio-group 可以全局控制每一项为禁用状态。

单项禁用

单选框组局部禁用

单选框组全局禁用

<template>
  <div className="idesign-demo-block-column">
    <h4>单项禁用</h4>
    <div className="idesign-demo-block-row">
      <i-radio disabled>未选中</i-radio>
      <i-radio type="radio-button" disabled> 未选中 </i-radio>
    </div>

    <h4>单选框组局部禁用</h4>
    <div className="idesign-demo-block-row">
      <i-radio-group v-model="checked">
        <i-radio value="1">选项一</i-radio>
        <i-radio value="2" disabled> 选项二 </i-radio>
        <i-radio value="3">选项三</i-radio>
      </i-radio-group>
    </div>
    <div className="idesign-demo-block-row">
      <i-radio-group
        type="radio-button"
        v-model="checked"
      >
        <i-radio value="1">选项一</i-radio>
        <i-radio value="2">选项二</i-radio>
        <i-radio value="3" disabled> 选项三 </i-radio>
      </i-radio-group>
    </div>

    <h4>单选框组全局禁用</h4>
    <div className="idesign-demo-block-row">
      <i-radio-group disabled>
        <i-radio value="1">选项一</i-radio>
        <i-radio value="2">选项二</i-radio>
        <i-radio value="3">选项三</i-radio>
      </i-radio-group>
    </div>
    <div className="idesign-demo-block-row">
      <i-radio-group disabled type="radio-button">
        <i-radio value="1">选项一</i-radio>
        <i-radio value="2">选项二</i-radio>
        <i-radio value="3">选项三</i-radio>
      </i-radio-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const checked = ref('2')
</script>
显示代码

Radio Attributes

属性说明类型默认值
type单选框类型"radio"〡"radio-button"radio
size按钮单选框尺寸"small"〡"medium"〡"large"medium
modelValue / v-model是否固定选中（受控）booleanfalse
defaultChecked是否默认选中（非受控）booleanfalse
disabled是否禁用组件booleanfalse
value单选框的值string〡number--

Radio Events

属性说明类型默认值
change值变化时触发(checked: boolean, context: Event) => void--

RadioGroup Attributes

属性说明类型默认值
modelValue / v-model单选框组选中固定值（受控）string〡number--
defaultChecked单选框组选中默认值（非受控）string〡number--
type单选框组全局类型"radio"〡"radio-button""radio"
size按钮单选框全局尺寸"small"〡"medium"〡"large""medium"
disabled单选框组是否全局禁用booleanfalse

RadioGroup Events

属性说明类型默认值
change选中某一项时触发(value: string〡number, context: Event) => void--
Last Updated:
Contributors: Leophen