Toggle

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/toggle.json

npx shadcn@latest add https://prototyper-ui.com/r/toggle.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/toggle.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/toggle.json

This will add the following files to your project:

• components/ui/toggle.tsx

Usage

import { Toggle } from "@/components/ui/toggle"

<Toggle>Bold</Toggle>

Examples

Outline

Small

Large

Disabled

With Text

Styling

Data Slots

Use data-slot attributes to target the toggle in CSS:

Customization Examples

/* Style all pressed toggles */
[data-slot="toggle"][aria-pressed="true"] {
  @apply bg-primary text-primary-foreground;
}

{/* Use className for one-off overrides */}
<Toggle className="rounded-full">Pill Toggle</Toggle>

API Reference

Toggle

A two-state toggle button that can be pressed or unpressed.

All Base UI Toggle props are forwarded via ...props.

toggleVariants

A cva helper exported for use outside of the <Toggle> component.

import { toggleVariants } from "@/components/ui/toggle"

<button className={toggleVariants({ variant: "outline", size: "sm" })}>Custom Toggle</button>

Accessibility

Keyboard Interactions

ARIA Attributes

• Renders as a <button> element with aria-pressed attribute.
• aria-pressed="true" when the toggle is in the pressed state, aria-pressed="false" when unpressed.
• Screen readers announce the toggle as a toggle button with its current pressed/unpressed state.
• disabled attribute is set when the toggle is disabled.

Related