Skip to content

Radio 按钮

基础用法

Radio 选中值为其绑定的 value 属性,当 Radio v-model 的值与其 value 全等时,Radio 处于选中状态。

提示

如果你忽略了 value 属性,Radio 则会根据 W3C标准 提交 'on' 的默认值

value:


vue
<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
</script>

<template>
  <p>value: {{ value }}</p>
  <s-radio v-model="value" value="Option">Radio Option</s-radio>
  <s-radio v-model="value">Default Value</s-radio><br />
  <s-button size="small" @click="value = ''">cancel</s-button>
</template>

单选框组

使用 s-radio-group 来组合互斥选项

Value: a

vue
<script setup lang="ts">
import { ref } from 'vue';

const value = ref('a');
</script>

<template>
  <p>Value: {{ value }}</p>
  <s-radio-group v-model="value">
    <s-radio value="a">OptionA</s-radio>
    <s-radio value="b">OptionB</s-radio>
    <s-radio value="c">OptionC</s-radio>
  </s-radio-group>
</template>

Radio API

Radio Attributes

名称说明类型默认值
v-model选中项绑定值string|\number|boolean''
value单选框的值string|\number|boolean'on'

Radio CSS

名称说明默认值
--s-radio-size单选框框大小基准值calc(var(--base-font-size) * 1.25)
--s-radio-series-gap单选框之间的间距10px

RadioGroup API

RadioGroup Attributes

名称说明类型默认值
v-model绑定值string|\number|boolean''

RadioGroup Events

名称说明类型返回值
change绑定值变化时触发的事件Function(value: string | number | boolean) => void