Switch

ESwitch A Switch displays two exclusive options and allows the user to toggle the status of a single item between checked and unchecked. Demo Here

Usage

<template>
  <ESwitch v-model="value"> On</ESwitch>
</template>

<script setup>
  const value = ref(false);
</script>

Props

For ESwitch component, the following props are available:

Prop	Type	Default	Note
label	String	-	Component's label
id	String	-	HTML id attribute.
disabled	Boolean	false	Disables the ESwitch.
width	String	-	Sets the component's width.
height	String	-	Sets the component's height.
message	String	-	Adds a message below the select.
modelValue	Boolean	-	If true, the element is checked.
validateOn	String	"input"	Triggers validation on @values: submit, input.
rules	Array	-	Validation rules. For more info refer to Form Validation.
state	String	-	Validates the user-provided data against established criteria and performs display validation. States can be none if no validation is necessary, danger if the selected is valid, or success if it is acceptable.
name	String	-	HTML name attribute.
icon	Object	{}	Adds a fixed icon to the switch. More Info about icons here.
trueIcon	Object	{}	Displays a true icon when the switch is checked. More Info here.
falseIcon	Object	{}	Displays a false icon when the switch is unchecked. More Info here.
square	Boolean	false	Removes rounded corners of the element.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.

Emits

The ESwitch component contains following emits.

Emit	Description
update:modelValue	Emitted when the local ref's value is mutated.

Slots

The ESwitch component provide following slots that enable you to customize the content.

Slot	Description
trueValue	Value of the switch if it's checked.
falseValue	Value of the switch if it's un-checked.