Switch

A control that allows the user to toggle between checked and not checked.

Component Source API Reference

Installation ​

pnpm dlx shadcn-vue@latest add switch

Usage ​

vue
<script setup lang="ts"> import { Switch } from '@/components/ui/switch' </script>  <template>  <Switch /> </template>

Add icon inside switch thumb ​

vue
<template>  <Switch :model-value="isDark" @update:model-value="toggleTheme">  <template #thumb>  <Icon v-if="isDark" icon="lucide:moon" class="size-3" />  <Icon v-else icon="lucide:sun" class="size-3" />  </template>  </Switch> </template>

Examples ​

Form ​

Edit this page on GitHub