Radio buttons
Set up radio-button lists for mutually exclusive value selection. Different color presets are available.
Demo
<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><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>SFC JSSFC TS
<script setup>
import { MbscPage, MbscRadio, MbscRadioGroup, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
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>
<script setup lang="ts">
import { MbscPage, MbscRadio, MbscRadioGroup, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
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>