---
title: "Vue Forms Switch Example | Mobiscroll"
component: "Forms"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/forms/switch"
---

# Switch - Vue Forms demo

Vue switch/toggle demo with or without description. Alternative to the checkbox. Supports disabled styling. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/forms/switch)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/form-components/forms/switch)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/form-components/forms/switch)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/forms/switch.md), [jQuery](https://demo.mobiscroll.com/jquery/forms/switch.md), [Angular](https://demo.mobiscroll.com/angular/forms/switch.md), [React](https://demo.mobiscroll.com/react/forms/switch.md)

## Description

Use the switch for turning options and setting fields on/off. Different color presets are available.

## What this demo shows

- This demo shows examples for the switch component.
- **Switch states** Switch controls displayed in both on and off states.
- **Labels and descriptions** Switches paired with titles and descriptive text.
- **Disabled states** Disabled switches displayed in both on and off states.
- **Color presets** Switches using the primary, secondary, success, danger, warning, and info color presets.

## Best for

- **Settings and preferences** Let users enable or disable configurable options.
- **Feature controls** Turn individual features or modes on and off.
- **Notification preferences** Manage binary choices for notification categories such as email, push, or reminders.
- **Privacy and permissions** Present clear on/off choices for consent, visibility, or access settings.

## Tutorial

```vue
<MbscSwitch v-model="switch1" label="Switch Off" description="This is description for Switch" />
<MbscSwitch v-model="switch2" label="Switch On" description="This is description for Switch 2" />
<MbscSwitch v-model="switch3" label="Disabled Switch Off" />
<MbscSwitch v-model="switch4" label="Disabled Switch On" :disabled="true" />
```

```vue
<MbscSwitch v-model="primary" label="Primary" color="primary" />
<MbscSwitch v-model="secondary" label="Secondary" color="secondary" />
<MbscSwitch v-model="success" label="Success" color="success" />
<MbscSwitch v-model="danger" label="Danger" color="danger" />
<MbscSwitch v-model="warning" label="Warning" color="warning" />
<MbscSwitch v-model="info" label="Info" color="info" />
```

## Code

### SFC JS

```vue
<script setup>
import { MbscPage, MbscSwitch, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Switch</div>
      <MbscSwitch label="Switch Off" description="This is description for Switch" />
      <MbscSwitch
        label="Switch On"
        description="This is description for Switch 2"
        :defaultChecked="true"
      />
      <MbscSwitch label="Disabled Switch Off" :disabled="true" />
      <MbscSwitch label="Disabled Switch On" :disabled="true" :defaultChecked="true" />
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Switch colors</div>
      <MbscSwitch label="Primary" color="primary" :defaultChecked="true" />
      <MbscSwitch label="Secondary" color="secondary" :defaultChecked="true" />
      <MbscSwitch label="Success" color="success" :defaultChecked="true" />
      <MbscSwitch label="Danger" color="danger" :defaultChecked="true" />
      <MbscSwitch label="Warning" color="warning" :defaultChecked="true" />
      <MbscSwitch label="Info" color="info" :defaultChecked="true" />
    </div>
  </MbscPage>
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscPage, MbscSwitch, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Switch</div>
      <MbscSwitch label="Switch Off" description="This is description for Switch" />
      <MbscSwitch
        label="Switch On"
        description="This is description for Switch 2"
        :defaultChecked="true"
      />
      <MbscSwitch label="Disabled Switch Off" :disabled="true" />
      <MbscSwitch label="Disabled Switch On" :disabled="true" :defaultChecked="true" />
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Switch colors</div>
      <MbscSwitch label="Primary" color="primary" :defaultChecked="true" />
      <MbscSwitch label="Secondary" color="secondary" :defaultChecked="true" />
      <MbscSwitch label="Success" color="success" :defaultChecked="true" />
      <MbscSwitch label="Danger" color="danger" :defaultChecked="true" />
      <MbscSwitch label="Warning" color="warning" :defaultChecked="true" />
      <MbscSwitch label="Info" color="info" :defaultChecked="true" />
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- The on/off state is controlled by `checked`/`defaultChecked` (React `defaultChecked={true}`; JS/jQuery `checked` attribute on `<input type="checkbox" mbsc-switch>`; Angular/Vue bind it through two-way binding - see below).
- `label` sets the switch's title text (JS/jQuery: `data-label` attribute).
- `description` sets secondary helper text shown under the label (JS/jQuery: `data-description` attribute).
- `disabled` renders the switch non-interactive in either the on or off state; combine with `checked`/`defaultChecked` to show a disabled-on switch.
- `color` applies a preset accent color to the track/thumb when on: `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, or `'info'`.
- Framework state binding differs: JS/jQuery both read/write state imperatively via the shared `mobiscroll.getInst(element).checked` helper; jQuery additionally offers the chained form `$(element).mobiscroll('setVal', ...)` (not available in plain JS); React uses `defaultChecked`/`checked` + `onChange`; Angular binds via `[(ngModel)]="value"` for two-way sync; Vue binds via `v-model="value"`.
- Framework markup differences: JS/jQuery wraps a plain `<input type="checkbox" mbsc-switch>` in a `<label>` with `data-*` attributes for `label`/`description`/`color`; React uses `<Switch label="..." description="..." color="primary" disabled={true} defaultChecked={true} />`; Angular uses `<mbsc-switch label="..." color="primary" [(ngModel)]="value" [disabled]="true">`; Vue uses `<MbscSwitch v-model="value" label="..." color="primary" />` (with `disabled` set separately per switch since it isn't part of the `v-model` binding).
- Grouping switches under a shared `mbsc-form-group` with an `mbsc-form-group-title` is a layout convention for the demo, not a switch option - each switch instance is independently configured.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Checkbox](https://demo.mobiscroll.com/vue/forms/checkbox.md) - Vue checkbox and checklist demo and styling with or without description text. Supports disabled styling.
- Next: [Radio buttons](https://demo.mobiscroll.com/vue/forms/radio-button.md) - Vue radio button demo for single select option lists. Use it with or without description, supports disabled styling.