Switch

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

Component Source Primitive API Reference

Installation ​

bash
npx 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 :checked="isDark" @update:checked="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 ​

Email Notifications

Receive emails about new products, features, and more.

Receive emails about your account security.

Edit this page on GitHub