Use the switch for turning options and setting fields on/off. Different color presets are available.
Demo
<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" />
<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" />
SFC JSSFC TS
<script setup>
import { MbscPage, MbscSwitch, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</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>
<script setup lang="ts">
import { MbscPage, MbscSwitch, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</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>