Switch

Basic

Switches are a pleasant interface for toggling a value between two states, and offer the same semantics and keyboard navigation as native checkbox elements.

<script setup lang="ts">
import { ref } from 'vue'

const isEnabled = ref(false)
</script>

<template>
  <BSwitch v-model="isEnabled">
    Basic switch
  </BSwitch>
</template>

With label

Usually you want to pair your switch with some kind of label. This is done by wrapping a BSwitch & a BSwitchLabel in a BSwitchGroup

Disabled

<script setup lang="ts">
import { ref } from 'vue'

const isEnabled = ref(false)
</script>

<template>
  <div class="w-full max-w-sm flex justify-between items-center">
    <BSwitchGroup>
      <BSwitchLabel class="text-xl font-medium">
        {{ isEnabled ? 'Enabled' : 'Disabled' }}
      </BSwitchLabel>
      <BSwitch v-model="isEnabled">
        Toggle state
      </BSwitch>
    </BSwitchGroup>
  </div>
</template>

Custom icon

To render a different icon for the enabled state set the icon prop to any iconify icon (i-mdi:broadcast in this example)

<script setup lang="ts">
import { ref } from 'vue'

const isEnabled = ref(true)
</script>

<template>
  <BSwitch
    v-model="isEnabled"
    icon="i-mdi:broadcast"
  >
    Toggle state
  </BSwitch>
</template>