# Switch

# Usage

Examples 
<template>
  <div>
    <CLink
      href="https://coreui.io/vue/demo/#/base/switches"
      target="_blank"
    >Check out more examples here!</CLink><br>
    <template v-for="(mode, index) in modes">
      Passed props: {{mode}}
      <div class="d-flex justify-content-between my-4" :key="index">
        <CSwitch
          :key="key"
          :color="color"
          v-bind="mode"
          checked
          :value="color"
          v-for="(color, key) in colors"
        />
      </div>
    </template>
  </div>
</template>
Check out more examples here!
Passed props: {}
Passed props: { "size": "sm" }
Passed props: { "size": "lg" }
Passed props: { "variant": "3d" }
Passed props: { "shape": "pill" }
Passed props: { "variant": "opposite" }
Passed props: { "variant": "outline", "shape": "pill" }

# Features

  • Many styles and sizes,
  • Checkbox or radio input mode

# CSwitch API

Name
Default
Type
color undefined String
Background color of the component.
variant undefined String
Variant of the component valid values: 'outline', 'opposite', '3d'.
size undefined String
Size of the switch. Valid values: 'sm','lg'.
shape undefined String
Shape of the switch. Valid values: 'square','pill'.
checked false Boolean /String /Number
Prop which indicates state of the element. Set .sync modifier to receive state changes.
labelOn, labelOff undefined String
Optionally set text labels on switch (you can pass one or both labels) 
<CSwitch labelOn="\u2713" labelOff="\u2715"/>
type 'checkbox' String
HTML input type. Valid values: 'checkbox', 'radio'. If set to 'radio' component mechanism changes (see checked prop).
id, name, disabled, required, value other input attributes undefined HTML attributes
HTML attributes (not props) that could be passed to input.
CoreUI © 2025 creativeLabs. core-logo