Switch Button

The Switch Button control provides the possibility to turn on and off some app settings depending on the position of the button. You can create a switched on button, a disabled button or even initialize a disabled switched on button, if you need to prevent users from changing the default settings.

Related resources

• Get the widget by installing the @svar-ui/vue-core package.
• Check the API Reference to see the list of configuration properties.
• Explore the samples to visualize the available features.

Initialization

To create a Switch instance on a page, you need to complete two steps:

• import the source file of the control on a page:

App.vue

<script setup>
  import { Switch } from "@svar-ui/vue-core";
</script>

• use the <Switch> tag to initialize the control:

App.vue

<template>
  <Switch/>
</template>

A default switch button is initialized turned off with no label.

Setting the value

The Switch button is initialized on a page turned off. Use the value property to control the state of the button. Set the property to true to turn the button on:

<Switch :value="true"/>

Related sample: Switch Button

Getting the current state

It is possible to get the state of a Switch button. For this, you need:

• specify a variable that will contain the state of the Switch button (it may contain the initial state):

<script setup>
  import { ref } from "vue";
  import { Switch } from "@svar-ui/vue-core";

  const state = ref(true);
</script>

• bind the variable to the value property of the control:

<Switch v-model:value="state" />

After that the value assigned to the bound variable will be updated on each change of the state of the Switch button.

Related sample: Switch Button

Setting the disabled state

You can initialize a disabled Switch Button with the help of the disabled property. Set the property to true or specify it without any value, like this:

<Switch :disabled="true"/>

Related sample: Switch Button

Adding a label

A default switch button has no label. To add it, you can use the Field component and complete several steps:

• include the Field source file on a page, declare the <Field> tag and fill it with the necessary props:
  • add a desired label via the label property. Besides a simple text, you can display the current control's state in the label (see the example below)
  • set the type="switch" property for the Field component
  • set the position="left" property, if you want to place the label to the left of the switch button

<script setup>
  import { ref } from "vue";

  const v1 = ref(false);
</script>

<template>
  <Field label="Switch" position="left" />
</template>

After that, wrap the switch into the <Field> tag. The Field component automatically generates an id for the inner control, which creates label-input association.

<script setup>
  import { Switch, Field } from "@svar-ui/vue-core";
</script>

<template>
  <Field label="Switch" position="left" type="switch">
    <Switch />
  </Field>
</template>

Related sample: Switch Button