单选框 Radio

对应 Arco Radio，按钮组对应 Arco 的 type="button"。 属性用法见 Element Plus 文档。

基础与禁用

标签不随选中状态变色，禁用项不能修改。

VueReactOther

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('Vue')
</script>

<template>
  <el-radio-group v-model="value">
    <el-radio value="Vue">Vue</el-radio>
    <el-radio value="React">React</el-radio>
    <el-radio value="Other" disabled>Other</el-radio>
  </el-radio-group>
</template>

按钮组与尺寸

按钮组的三档尺寸对应 Arco 的 small、medium、large。

LondonParisTokyo

LondonParisTokyo

LondonParisTokyo

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('London')
const sizes = ['small', 'default', 'large'] as const
</script>

<template>
  <el-radio-group v-for="size in sizes" :key="size" v-model="value" :size="size">
    <el-radio-button value="London">London</el-radio-button>
    <el-radio-button value="Paris">Paris</el-radio-button>
    <el-radio-button value="Tokyo">Tokyo</el-radio-button>
  </el-radio-group>
</template>

独立尺寸与边框

Arco 没有独立尺寸和边框形态，这里保留 Element Plus 的配置语义。

SmallDefaultLargeBorder

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('default')
</script>

<template>
  <el-radio-group v-model="value">
    <el-radio value="small" size="small">Small</el-radio>
    <el-radio value="default">Default</el-radio>
    <el-radio value="large" size="large">Large</el-radio>
    <el-radio value="border" border>Border</el-radio>
  </el-radio-group>
</template>

与 Arco 的差异

• 独立单选框的尺寸与 border 没有 Arco 对应项，保留 Element Plus 形态。
• 按钮组保留键盘焦点框，组末尾外边距与 Arco 不同。