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

Name	Description	Type	Default
model-value / v-model	Binding value	string | number | boolean	—
value	Value of radio	string | number | boolean	—
label	Label text	string | number | boolean	—
disabled	Whether disabled	boolean	false
border	Whether to add border	boolean	false
size	Size	'large' | 'default' | 'small'	—
name	Native name attribute	string	—