Toggle

When to use

Toggle is for a single independent on/off control that acts on content, formatting-style: underline, mute, pin. Use Switch for a setting that reads as on/off in prose and applies immediately, Checkbox when the value is a form field, and ToggleGroup when the options are exclusive.

Platform notes

The pressed state paints --accent with --accent-foreground, which is also the hover surface, so a default-variant toggle sitting on an --accent or --sidebar-accent background has no visible pressed state; use variant="outline" there, as the demo does for three of its four toggles. Radix supplies aria-pressed, so never render your own "on" / "off" text next to it. Each toggle carries an aria-label because the content is often just a Lucide icon, and that label is a react-i18next message like every other user-facing string.

Install

npx shadcn@latest add toggle

Code

import { Underline } from "lucide-react";

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

export function ToggleDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Toggle aria-label="Toggle default">Default</Toggle>
      <Toggle variant="outline" aria-label="Toggle outline">
        Outline
      </Toggle>
      <Toggle variant="outline" disabled aria-label="Toggle disabled">
        Disabled
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle underline">
        <Underline />
      </Toggle>
    </div>
  );
}

Full API

ui.shadcn.com/docs/components/toggle