Switch

Matches Arco Switch with borderless default and small sizes. See the Element Plus docs for props.

Basics & Disabled

Default and small match Arco's sizes; lighter colors distinguish disabled states.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(true)
</script>

<template>
  <el-switch v-model="value" />
  <el-switch v-model="value" size="small" />
  <el-switch :model-value="true" disabled />
  <el-switch :model-value="false" disabled />
</template>

Labels & Extended Size

Inline prompts match Arco labels; large and external labels have no Arco equivalent.

On

Disabled

Enabled

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(true)
</script>

<template>
  <el-switch v-model="value" inline-prompt active-text="On" inactive-text="Off" />
  <el-switch v-model="value" size="large" />
  <el-switch v-model="value" active-text="Enabled" inactive-text="Disabled" />
</template>

Differences from Arco

• The large size extends Arco using Element Plus size increments and has no direct Arco equivalent.
• External labels and loading icons follow Element Plus.