---
title: "Vue Forms Radio buttons Example | Mobiscroll"
component: "Forms"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/forms/radio-button"
---

# Radio buttons - Vue Forms demo

Vue radio button demo for single select option lists. Use it with or without description, supports disabled styling. For Vue and Nuxt.

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

## Description

Set up radio-button lists for mutually exclusive value selection. Different color presets are available.

## What this demo shows

- This demo shows different examples for radio buttons.
- **Single selection** Radio button groups for selecting one option from a set of mutually exclusive choices.
- **Option content** Radio buttons with labels and optional descriptive text.
- **States** Selected, unselected, and disabled radio button states.
- **Color presets** Primary, secondary, success, danger, warning, and info radio button colors.
- **Selection indicator** A checkmark identifies the currently selected option.

## Best for

- **Settings and preferences** Choosing one value from a small set of configuration options.
- **Forms and questionnaires** Presenting mutually exclusive answers that remain visible for quick comparison.
- **Plans and service levels** Selecting one option when labels and supporting descriptions help explain the differences.
- **Availability constraints** Showing choices that are currently unavailable with a disabled state.
- **Status-based choices** Using color presets to distinguish options with different meanings or levels of importance.

## Tutorial

```vue
<MbscRadioGroup name="group">
  <MbscRadio v-model="radio" value="value1" label="Radio Option 1" description="This is description for radio 1" />
  <MbscRadio v-model="radio" value="value2" label="Radio Option 2" description="This is description for radio 2" />
  <MbscRadio v-model="radio" value="value3" label="Radio Option 3" />
  <MbscRadio v-model="radio" value="value4" label="Disabled" :disabled="true" />
</MbscRadioGroup>
```

```vue
<MbscRadioGroup name="colors">
  <MbscRadio v-model="radio" value="primary" label="Primary" color="primary" />
  <MbscRadio v-model="radio" value="secondary" label="Secondary" color="secondary" />
  <MbscRadio v-model="radio" value="success" label="Success" color="success" />
  <MbscRadio v-model="radio" value="danger" label="Danger" color="danger" />
  <MbscRadio v-model="radio" value="warning" label="Warning" color="warning" />
  <MbscRadio v-model="radio" value="info" label="Info" color="info" />
</MbscRadioGroup>
```

## Code

### SFC JS

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

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

const radio = ref('1')
const color = ref('success')
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Radio buttons</div>
      <MbscRadioGroup v-model="radio" name="group">
        <MbscRadio value="1" label="Radio Option 1" description="This is description for radio 1" />
        <MbscRadio value="2" label="Radio Option 2" description="This is description for radio 2" />
        <MbscRadio value="3" label="Radio Option 3" />
        <MbscRadio value="4" label="Disabled" :disabled="true" />
      </MbscRadioGroup>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Radio button colors</div>
      <MbscRadioGroup v-model="color" name="colors">
        <MbscRadio value="primary" label="Primary" color="primary" />
        <MbscRadio value="secondary" label="Secondary" color="secondary" />
        <MbscRadio value="success" label="Success" color="success" />
        <MbscRadio value="danger" label="Danger" color="danger" />
        <MbscRadio value="warning" label="Warning" color="warning" />
        <MbscRadio value="info" label="Info" color="info" />
      </MbscRadioGroup>
    </div>
  </MbscPage>
</template>
```

### SFC TS

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

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

const radio = ref('1')
const color = ref('success')
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Radio buttons</div>
      <MbscRadioGroup v-model="radio" name="group">
        <MbscRadio value="1" label="Radio Option 1" description="This is description for radio 1" />
        <MbscRadio value="2" label="Radio Option 2" description="This is description for radio 2" />
        <MbscRadio value="3" label="Radio Option 3" />
        <MbscRadio value="4" label="Disabled" :disabled="true" />
      </MbscRadioGroup>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Radio button colors</div>
      <MbscRadioGroup v-model="color" name="colors">
        <MbscRadio value="primary" label="Primary" color="primary" />
        <MbscRadio value="secondary" label="Secondary" color="secondary" />
        <MbscRadio value="success" label="Success" color="success" />
        <MbscRadio value="danger" label="Danger" color="danger" />
        <MbscRadio value="warning" label="Warning" color="warning" />
        <MbscRadio value="info" label="Info" color="info" />
      </MbscRadioGroup>
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- Radios are grouped with `RadioGroup`/`mbsc-radio-group` (JS/jQuery: a `div` carrying the `mbsc-radio-group` attribute); an individual option is `Radio`/`mbsc-radio`/`input[mbsc-radio][type="radio"]`.
- Mutual exclusivity within a group comes from a shared `name`: set on the group in React/Vue (`RadioGroup name="group"`), or on each input in JS/jQuery and Angular.
- `label` sets an option's primary text; `description` (`data-description` in JS/jQuery) adds secondary explanatory text beneath the label.
- Selection state is bound differently per framework: Angular and Vue bind the selected value on the group itself (`[(ngModel)]="group"` in Angular, `v-model="radio"` in Vue) with each option supplying its own `value`; React marks the initially selected option with `defaultChecked={true}`; JS/jQuery marks it with the plain `checked` attribute on that option's input.
- `disabled` makes a single option non-selectable: React `disabled={true}`, Vue `:disabled="true"`, Angular `[disabled]="true"`, JS/jQuery the bare `disabled` attribute.
- `color` (`data-color` in JS/jQuery) sets a preset color per option: `primary`, `secondary`, `success`, `danger`, `warning`, `info`.

## 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: [Switch](https://demo.mobiscroll.com/vue/forms/switch.md) - Vue switch/toggle demo with or without description. Alternative to the checkbox. Supports disabled styling.