El Switch

Switch Component

Switch component is used for switching between two opposing states.

When to Use

• Enable/disable features
• Toggle settings
• On/off switches
• Boolean state toggles

Basic Usage

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

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

const value = ref(true)
</script>

Sizes

<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

Events

Slots

Best Practices

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