Switch

Indicates a switch between two opposing states. Used to trigger on/off.

Basic Usage

Bind v-model to a Boolean variable. The --es-switch-on-color and --es-switch-off-color properties are used to set the background color of the switch.

<template>
    <Switch v-model="value" />
</template>

<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const value = ref(true)
</script>

Size

Set the size property to accept large/small and render different sizes.

<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const test = ref(false)
</script>
<template>
  <div class="switch-size-container">
    <Switch v-model="test" size="large"/>
    <Switch v-model="test"/>
    <Switch v-model="test" size="small"/>
  </div>
</template>
<style scoped>
.switch-size-container {
  display: flex;
  align-items: center;
  .es-switch {
    margin-right: 10px;
  }
}
</style>

Disabled State

Set the disabled property, which accepts a boolean and is set to true to disable it.

Normal:

Disabled:

<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const test = ref(false)
const test2 = ref(false)
</script>
<template>
  Normal: <Switch v-model="test" /> <br/>
  Disabled: <Switch v-model="test2" disabled/>
</template>

Display Inner Text

Use the active-text and inactivity-text properties to set the text description of the switch.

ON

<template>
    <Switch v-model="value" activeText="ON" inactiveText="OFF"/>
</template>

<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const value = ref(true)
</script>

Custom Active/Inactive Value

You can set active-value and inactivity-value properties, which accept values of type boolean | string | number.

model-value: right

<template>
    <Switch v-model="test" activeValue="right" inactiveValue="wrong" />
    <h4>model-value: {{ test }}</h4>
</template>
<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const test = ref('right')
</script>

---

Switch Attributes

Name	Description	Type	Default
modelValue	current value	any	—
disabled	whether to disable the switch	boolean	false
activeValue	value when switch is active	any	true
inactiveValue	value when switch is inactive	any	false
name	native input name	string	—
activeText	text when active	string	—
inactiveText	text when inactive	string	—
size	switch size (e.g. 'small', 'large')	string	—

---

Switch Events

Name	Description	Type
change	triggers when switch value changes	(value: any) => void
update:modelValue	triggers when value changes (for v-model)	(value: any) => void

---