Radio

Matches Arco Radio; radio buttons map to Arco's button type. See the Element Plus docs for props.

Basics & Disabled

Labels keep their color when selected; disabled items cannot be changed.

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>

Button Groups & Sizes

The three button-group sizes match Arco small, medium and 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>

Standalone Sizes & Border

Standalone sizes and borders have no Arco equivalent and retain Element Plus behavior.

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>

Differences from Arco

• Standalone sizes and border have no Arco equivalent and keep the Element Plus form.
• Button groups keep a keyboard focus ring and different trailing spacing.