Switch

Switch is used for switching between two opposing states.

Basic usage

Bind v-model to a Boolean typed variable. The --el-switch-on-color and --el-switch-off-color CSS variables decides the background color in two states.

Viwer Source

<template>
  <field-switch v-model="value1" />
  <field-switch
    v-model="value2"
    class="ml-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(true)
</script>

Sizes

Close

Open

Close

Open

Close

Open

Viwer Source

<template>
  <field-switch
    v-model="value"
    size="large"
    active-text="Open"
    inactive-text="Close"
  />
  <br />
  <field-switch v-model="value" active-text="Open" inactive-text="Close" />
  <br />
  <field-switch
    v-model="value"
    size="small"
    active-text="Open"
    inactive-text="Close"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref(true)
</script>

Text description

You can add active-text and inactive-text attribute to show texts. use inline-prompt attribute to control text is displayed inside dot.

You can add active-text and inactive-text attribute to show texts.

Pay by year

Pay by month

Pay by year

Pay by month

Y

Viwer Source

<template>
  <field-switch
    v-model="value1"
    class="mb-2"
    active-text="Pay by month"
    inactive-text="Pay by year"
  />
  <br />
  <field-switch
    v-model="value3"
    class="mb-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
    active-text="Pay by month"
    inactive-text="Pay by year"
  />
  <br />
  <field-switch
    v-model="value4"
    class="ml-2"
    inline-prompt
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
    active-text="Y"
    inactive-text="N"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(true)
const value3 = ref(true)
</script>

Display custom icons

Tips

Use the active-icon and inactive-icon attribute to add icon. You can pass either string for the component name (registered in advance) or the component itself which is a SVG Vue component. Element Plus has provided a set of icon that you can find at icon

Viwer Source

<template>
  <el-switch v-model="value1" :active-icon="Check" :inactive-icon="Close" />
  <br />
  <field-switch
    v-model="value2"
    class="mt-2"
    style="margin-left: 24px"
    inline-prompt
    :active-icon="Check"
    :inactive-icon="Close"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Check, Close } from '@element-plus/icons-vue'
const value1 = ref(true)
const value2 = ref(true)
</script>

Disabled

Adding the disabled attribute disables Switch.

Viwer Source

<template>
  <field-switch v-model="value1" disabled />
  <br />
  <field-switch v-model="value1" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Check, Close } from '@element-plus/icons-vue'
const value1 = ref(true)
const value2 = ref(true)
</script>

Loading

Setting the loading attribute to true indicates a loading state on the Switch.

Viwer Source

<template>
  <field-switch v-model="value1" loading />
  <field-switch v-model="value2" loading class="ml-2" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(false)
</script>

Props

Name	Description	Type	Mandatory
value	binding value, it should be equivalent to either active-value or inactive-value, by default it's boolean type	boolean / string / number	True

Attributes

Name	Description	Type	Default
active-text	text displayed when in on state	String	——————
inactive-text	text displayed when in off state	String	——————
inline-prompt	whether icon or text is displayed inside dot, only the first character will be rendered for text	Boolean	False
disabled	whether Switch is disabled	Boolean	False
loading	whether Switch is in loading state	Boolean	False
size	size of Switch large / default / small	String	Default