El Radio

Radio Component

Radio component provides single selection among multiple options with various styles.

When to Use

• Single selection from options
• Mutually exclusive choices
• Form radio fields
• Settings selection

Basic Usage

<template>
  <el-radio v-model="radio" value="1">Option A</el-radio>
  <el-radio v-model="radio" value="2">Option B</el-radio>
</template>

<script setup>
import { ref } from 'vue'

const radio = ref('1')
</script>

Disabled

<template>
  <el-radio v-model="radio" value="1" disabled>Disabled</el-radio>
</template>

Radio Group

<template>
  <el-radio-group v-model="radio">
    <el-radio value="1">Option A</el-radio>
    <el-radio value="2">Option B</el-radio>
    <el-radio value="3">Option C</el-radio>
  </el-radio-group>
</template>

With Borders

<template>
  <el-radio-group v-model="radio">
    <el-radio value="1" border>Option A</el-radio>
    <el-radio value="2" border>Option B</el-radio>
  </el-radio-group>
</template>

Radio Button

<template>
  <el-radio-group v-model="radio">
    <el-radio-button value="1">Option A</el-radio-button>
    <el-radio-button value="2">Option B</el-radio-button>
    <el-radio-button value="3">Option C</el-radio-button>
  </el-radio-group>
</template>

Options Attribute

<template>
  <el-radio-group v-model="radio" :options="options" />
</template>

<script setup>
import { ref } from 'vue'

const radio = ref('1')
const options = [
  { value: '1', label: 'Option A' },
  { value: '2', label: 'Option B' },
  { value: '3', label: 'Option C' }
]
</script>

API Reference

Radio Attributes

Radio Events

RadioGroup Attributes

Best Practices

1. Use value prop (not label) for radio values since 2.6.0
2. Use el-radio-button for button-style groups
3. Use options for dynamic radio lists