---
title: "Vue Forms Checkbox Example | Mobiscroll"
component: "Forms"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/forms/checkbox"
---

# Checkbox - Vue Forms demo

Vue checkbox and checklist demo and styling with or without description text. Supports disabled styling. For Vue and Nuxt.

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

## Description

Use checkboxes for multiple choice lists or properties or `true/false` properties of an event. Different color presets are available.

## What this demo shows

- This demo shows different examples for checkboxes.
- **Checkbox states** Checkboxes in checked and unchecked states.
- **Disabled states** Disabled checkboxes in both checked and unchecked states.
- **Supporting content** Checkboxes with titles and descriptive text.
- **Color presets** The primary, secondary, success, danger, warning, and info checkbox colors.
- **Selection patterns** Checkboxes for selecting multiple options and setting `true/false` event properties.

## Best for

- **Multiple-choice lists** Letting users select any number of options from a list.
- **Event properties** Setting independent `true/false` properties for an event.
- **Settings forms** Pairing checkbox titles with descriptive text when an option needs additional context.
- **Unavailable options** Showing checked or unchecked values that users cannot currently change.
- **Color-coded options** Applying preset colors when checkboxes need distinct visual meaning.

## Tutorial

```vue
<MbscCheckbox v-model="option1" label="Option 1" description="Checked checkbox" />
<MbscCheckbox v-model="option2" label="Option 2" description="Empty checkbox" />
<MbscCheckbox v-model="option3" label="Option 3" description="Disabled checkbox" :disabled="true" />
<MbscCheckbox v-model="option4" label="Option 4" description="Disabled and checked checkbox" :disabled="true" />
```

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

## Code

### SFC JS

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

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const option1 = ref(true)
const option2 = ref(false)
const option3 = ref(false)
const option4 = ref(true)

const primary = ref(true)
const secondary = ref(true)
const success = ref(true)
const danger = ref(true)
const warning = ref(true)
const info = ref(true)
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Checkbox</div>
      <MbscCheckbox v-model="option1" label="Option 1" description="Checked checkbox" />
      <MbscCheckbox v-model="option2" label="Option 2" description="Empty checkbox" />
      <MbscCheckbox
        v-model="option3"
        label="Option 3"
        description="Disabled checkbox"
        :disabled="true"
      />
      <MbscCheckbox
        v-model="option4"
        label="Option 4"
        description="Disabled and checked checkbox"
        :disabled="true"
      />
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Checkbox colors</div>
      <MbscCheckbox v-model="primary" label="Primary" color="primary" />
      <MbscCheckbox v-model="secondary" label="Secondary" color="secondary" />
      <MbscCheckbox v-model="success" label="Success" color="success" />
      <MbscCheckbox v-model="danger" label="Danger" color="danger" />
      <MbscCheckbox v-model="warning" label="Warning" color="warning" />
      <MbscCheckbox v-model="info" label="Info" color="info" />
    </div>
  </MbscPage>
</template>
```

### SFC TS

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

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const option1 = ref(true)
const option2 = ref(false)
const option3 = ref(false)
const option4 = ref(true)

const primary = ref(true)
const secondary = ref(true)
const success = ref(true)
const danger = ref(true)
const warning = ref(true)
const info = ref(true)
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Checkbox</div>
      <MbscCheckbox v-model="option1" label="Option 1" description="Checked checkbox" />
      <MbscCheckbox v-model="option2" label="Option 2" description="Empty checkbox" />
      <MbscCheckbox
        v-model="option3"
        label="Option 3"
        description="Disabled checkbox"
        :disabled="true"
      />
      <MbscCheckbox
        v-model="option4"
        label="Option 4"
        description="Disabled and checked checkbox"
        :disabled="true"
      />
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Checkbox colors</div>
      <MbscCheckbox v-model="primary" label="Primary" color="primary" />
      <MbscCheckbox v-model="secondary" label="Secondary" color="secondary" />
      <MbscCheckbox v-model="success" label="Success" color="success" />
      <MbscCheckbox v-model="danger" label="Danger" color="danger" />
      <MbscCheckbox v-model="warning" label="Warning" color="warning" />
      <MbscCheckbox v-model="info" label="Info" color="info" />
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- `label` sets the checkbox's primary text; `description` adds secondary supporting text below/beside it.
- `disabled` (boolean prop/attribute) disables the checkbox in either its checked or unchecked state; it does not change the checked value.
- `color` accepts six presets: `primary`, `secondary`, `success`, `danger`, `warning`, `info` (no `light`/`dark` variant for checkboxes).
- Checked state handling differs by framework: React exposes `checked`/`defaultChecked` (controlled/uncontrolled); Vue two-way binds via `v-model` on a `ref<boolean>`, with no separate `defaultChecked` - the bound ref's initial value is the initial checked state; Angular two-way binds via `[(ngModel)]`; JS/jQuery uses the native `checked` attribute on `input[type="checkbox"][mbsc-checkbox]`.
- Framework differences: React `<Checkbox label="..." description="..." defaultChecked={true} disabled={true} color="primary" />`; Vue `<MbscCheckbox v-model="option1" label="..." description="..." :disabled="true" color="primary" />`; Angular `<mbsc-checkbox label="..." description="..." [(ngModel)]="ch1" [disabled]="true" color="primary"></mbsc-checkbox>`; JS/jQuery `<label><input mbsc-checkbox type="checkbox" data-label="..." data-description="..." data-color="primary" checked disabled /></label>`.

## 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

- Next: [Switch](https://demo.mobiscroll.com/vue/forms/switch.md) - Vue switch/toggle demo with or without description. Alternative to the checkbox. Supports disabled styling.