Switch
A control that allows the user to toggle between on and off states.
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/switch.jsonUsage
Use switch for binary settings that take effect immediately, unlike a checkbox which is typically used inside a form that's submitted.
<script setup lang="ts">
import { ref } from "vue";
import { Switch } from "@/components/ui/switch";
const airplaneMode = ref(false);
</script>
<template>
<div class="flex items-center gap-2">
<Switch id="airplane-mode" v-model="airplaneMode" />
<label for="airplane-mode">Airplane Mode</label>
</div>
</template>
Supports controlled/uncontrolled state via v-model (or defaultChecked) and disabled. Built on
reka-ui's Switch primitive.