Switch

role=switch toggle

A setting that takes effect the moment it's flipped — notifications on, dark mode. When the choice only applies after a Save button, use a Checkbox: a switch promises it's already done.

Basic

NotificationsAutoplaySubtitlesSync (managed)

<script setup lang="ts">
import { ref } from "vue";
import { BlessSwitch } from "blessing-ui";
const notify = ref(true);
const autoplay = ref(false);
const subs = ref(true);
</script>

<template>
  <div class="row">
    <BlessSwitch v-model="notify">Notifications</BlessSwitch>
    <BlessSwitch v-model="autoplay" size="sm">Autoplay</BlessSwitch>
    <BlessSwitch v-model="subs" label-position="start">Subtitles</BlessSwitch>
    <BlessSwitch disabled :model-value="true">Sync (managed)</BlessSwitch>
  </div>
</template>

• A native checkbox with role="switch", so it's read as on / off and Space flips it.
• The slot is its label; labelPosition="start" puts the label first. In a Field it gets the field's description and error.
• In right-to-left pages the thumb travels the other way.

Usage

import { BlessSwitch } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
disabled	boolean	—
size	"md" | "sm"	—
labelPosition	"start" | "end"	—
modelValue	boolean	false

Events

Name	Payload	Description
update:modelValue	[value: boolean]

Slots

Name	Scope	Description
default	—