Radio 单选框

用于在一组选项中选择单个选项的单选框组件，支持分组使用。

名称	分类	说明	类型	默认值
`type`	风格	预设主题颜色类型	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	—
`type`	风格	所有子单选框的预设主题颜色	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	—
`size`	尺寸	尺寸	`'large' \| 'small'`	—
`size`	尺寸	所有子单选框的尺寸	`'large' \| 'small'`	—
`color`	颜色	自定义十六进制颜色	`string`	—
`color`	颜色	所有子单选框的自定义十六进制颜色	`string`	—
`disabled`	状态	是否禁用	`boolean`	`false`
`disabled`	状态	是否禁用所有子单选框	`boolean`	`false`
`name`	行为	原生 name 属性	`string`	—
`id`	行为	原生 id 属性	`string`	—
`name`	行为	所有子单选框的 name 属性	`string`	—
`model-value / v-model`	内容	绑定值	`string \| number \| boolean`	—
`value`	内容	单选框的标识值，当 modelValue 等于 value 时为选中状态	`string \| number \| boolean`	—
`label`	内容	标签文本	`string`	—
`model-value / v-model`	内容	绑定值	`string \| number \| boolean`	—
`change`	事件	选中值改变时触发	`(value: RadioValueType) => void`	—
`change`	事件	选中值改变时触发	`(value: RadioValueType) => void`	—
`default`	插槽	自定义标签内容		—
`default`	插槽	子单选框内容		—
`focus`	暴露	使单选框获取焦点	`() => void`	—
`checked`	暴露	是否选中	`ComputedRef<boolean>`	—

基础用法

绑定 v-model 到一个变量并设置 value 属性。当 modelValue === value 时为选中状态。

<template>
  <div class="demo-radio">
    <px-radio v-model="selected" value="a" label="Option A" />
    <px-radio v-model="selected" value="b" label="Option B" />
    <p class="demo-radio__result">Selected: {{ selected }}</p>
  </div>
</template>

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

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

<style scoped>
.demo-radio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.demo-radio__result {
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-secondary);
}
</style>

禁用状态

使用 disabled 属性来禁用单选框。

<template>
  <div class="demo-radio">
    <px-radio v-model="selected" value="a" label="Disabled selected" disabled />
    <px-radio v-model="selected" value="b" label="Disabled unselected" disabled />
  </div>
</template>

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

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

<style scoped>
.demo-radio {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

类型

使用 type 属性来应用预设主题颜色。

<template>
  <div class="demo-radio">
    <px-radio v-model="v1" value="a" label="Primary" type="primary" />
    <px-radio v-model="v2" value="a" label="Success" type="success" />
    <px-radio v-model="v3" value="a" label="Warning" type="warning" />
    <px-radio v-model="v4" value="a" label="Danger" type="danger" />
    <px-radio v-model="v5" value="a" label="Info" type="info" />
  </div>
</template>

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

const v1 = ref('a');
const v2 = ref('a');
const v3 = ref('a');
const v4 = ref('a');
const v5 = ref('a');
</script>

<style scoped>
.demo-radio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
</style>

自定义颜色

使用 color 属性来设置选中状态的自定义十六进制颜色。

<template>
  <div class="demo-radio">
    <px-radio v-model="v1" value="a" label="Coral" color="#ff6b6b" />
    <px-radio v-model="v2" value="a" label="Teal" color="#20c997" />
    <px-radio v-model="v3" value="a" label="Purple" color="#845ef7" />
  </div>
</template>

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

const v1 = ref('a');
const v2 = ref('a');
const v3 = ref('a');
</script>

<style scoped>
.demo-radio {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

不同尺寸

使用 size 属性来设置单选框的大小。

<template>
  <div class="demo-radio">
    <px-radio v-model="v1" value="a" label="Small" size="small" />
    <px-radio v-model="v2" value="a" label="Default" />
    <px-radio v-model="v3" value="a" label="Large" size="large" />
  </div>
</template>

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

const v1 = ref('a');
const v2 = ref('a');
const v3 = ref('a');
</script>

<style scoped>
.demo-radio {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

单选框组

使用 PxRadioGroup 来通过单个 v-model 管理多个单选框。同一时间只能选中一个选项。

<template>
  <div class="demo-radio">
    <px-radio-group v-model="selected">
      <px-radio value="apple" label="Apple" />
      <px-radio value="banana" label="Banana" />
      <px-radio value="cherry" label="Cherry" />
      <px-radio value="durian" label="Durian" />
    </px-radio-group>
    <p class="demo-radio__result">Selected: {{ selected }}</p>
  </div>
</template>

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

const selected = ref('apple');
</script>

<style scoped>
.demo-radio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.demo-radio__result {
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-secondary);
}
</style>

Radio 单选框 ​

基础用法 ​

禁用状态 ​

类型 ​

自定义颜色 ​

不同尺寸 ​

单选框组 ​