
## Sizes

```vue
<template>
  <el-switch v-model="value1" size="large" />
  <el-switch v-model="value2" />
  <el-switch v-model="value3" size="small" />
</template>

Text Description

<template>
  <el-switch
    v-model="value"
    active-text="Open"
    inactive-text="Close"
  />
  
  <el-switch
    v-model="value"
    active-text="O"
    inactive-text="X"
    inline-prompt
  />
</template>

Custom Icons

<template>
  <el-switch
    v-model="value"
    :active-icon="Check"
    :inactive-icon="Close"
  />
</template>

<script setup>
import { Check, Close } from '@element-plus/icons-vue'
</script>

Extended Value Types

<template>
  <el-switch
    v-model="value"
    active-value="on"
    inactive-value="off"
  />
</template>

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

const value = ref('on')
</script>

Disabled

<template>
  <el-switch v-model="value" disabled />
</template>

Loading

<template>
  <el-switch v-model="value" loading />
</template>

Prevent Switching

<template>
  <el-switch v-model="value" :before-change="beforeChange" />
</template>

<script setup>
const beforeChange = () => {
  return confirm('Are you sure?')
}
</script>

API Reference

Attributes

Name	Description	Type	Default
model-value / v-model	Binding value	`boolean \| string \| number`	`false`
disabled	Whether disabled	`boolean`	`false`
loading	Loading state	`boolean`	`false`
size	Size	`'' \| 'large' \| 'default' \| 'small'`	`''`
width	Width	`number \| string`	`''`
inline-prompt	Display text inside dot	`boolean`	`false`
active-icon	Icon when on	`string \| Component`	—
inactive-icon	Icon when off	`string \| Component`	—
active-text	Text when on	`string`	`''`
inactive-text	Text when off	`string`	`''`
active-value	Value when on	`boolean \| string \| number`	`true`
inactive-value	Value when off	`boolean \| string \| number`	`false`
name	Input name	`string`	`''`
validate-event	Trigger form validation	`boolean`	`true`
before-change	Hook before change	`() => Promise<boolean> \| boolean`	—

Events

Name	Description	Type
change	Triggers when value changes	`(val: boolean \| string \| number) => void`

Slots

Name	Description
active-action	Customize active action
inactive-action	Customize inactive action
active	Customize active content
inactive	Customize inactive content

Best Practices

Use before-change for confirmation dialogs
Use loading for async operations
Use active-value/inactive-value for non-boolean values

el-switch

Switch Component

When to Use

Basic Usage