Toggle

A two-state button that can be either on or off.

Installation


pnpm dlx shadcn@latest add @force-ui-vue/toggle

<script setup lang="ts">
import { Toggle } from "@/components/ui/toggle"
</script>
 
<template>
  <Toggle>Toggle</Toggle>
</template>

Use variant="outline" for an outline style.

Use the size prop to change the size of the toggle.

See the Radix Toggle documentation.

On This Page

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.