Set disabled state in Vue Switch component

11 Jun 20241 minute to read

Switch can be disabled by setting the disabled property to true.

The following example illustrates how to disable support in Switch component.

Composition API (~/src/App.vue)

<template>
  <ejs-switch disabled=true ></ejs-switch>
</template>

<script setup>

import { SwitchComponent as EjsSwitch } from "@syncfusion/ej2-vue-buttons";
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/fabric.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/fabric.css";

.e-switch-wrapper {
  margin-top: 18px;
}
</style>

Options API (~/src/App.vue)

<template>
  <ejs-switch disabled=true></ejs-switch>
</template>

<script>

import { SwitchComponent } from "@syncfusion/ej2-vue-buttons";

export default {
  name: "App",
  components: {
    "ejs-switch": SwitchComponent
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/fabric.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/fabric.css";

.e-switch-wrapper {
  margin-top: 18px;
}
</style>