Shadcn Toggle Components

Shadcn Toggle Component

The Shadcn Toggle is a button that stays pressed. Click it once to turn an option on, click it again to turn it off. Bold and italic buttons in a text editor, a heart that saves a favorite and a bookmark button on an article are all toggles, and grouping several of them creates compact toolbars and view switchers.

A heart that fills when pressed, a bookmark with a label, bold, italic and underline groups in single or multiple mode and colored Star, Heart and Bookmark toggles are collected here. The shadcn toggle and toggle group are built with shadcn/ui, React and Tailwind CSS and run on both Radix UI and Base UI primitives.

What is the Shadcn Toggle Component?

A toggle is a two state button. It looks like a regular button, but it remembers whether it is on or off and tells assistive technology through aria-pressed. The shadcn/ui Toggle can manage that state itself with defaultPressed, or you can control it with pressed and onPressedChange. The ToggleGroup component combines several toggles into one control where either one item or several items can be on at the same time.

Use a toggle for options that change how something looks or behaves right away, such as formatting, favorites or a list and grid view. For a setting that is saved, like enabling notifications, a Switch reads more clearly. For a choice inside a form that is submitted later, use a Checkbox, and for a regular action that does not stay pressed, use a Button.

Anatomy of the Shadcn Toggle

7 Shadcn Toggle Variants

Each toggle variant listed here is previewed live at the top of this page, together with its source code and install command.

• Icon only: A round outline heart that fills with the destructive color when pressed, and an italic formatting toggle.
• Icon with text: A Bookmark toggle that fills its icon when active, and a default style Italic toggle with a label.
• Single selection group: A toggle group where only one of bold, italic and underline can be active at a time.
• Multiple selection group: An outline toggle group for text formatting where any combination of options can be on.
• Colored group with spacing: Small outline Star, Heart and Bookmark toggles with text labels and their own fill colors, spaced apart inside one multiple selection group.

How to Install the Shadcn Toggle Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a toggle variant by its name:

npx shadcn@latest add @shadcnuikit/toggle1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Toggle Component

Use Toggle for one option and ToggleGroup for a set. Icon only toggles need an aria-label so screen readers can name them.

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

export function Formatting() {
  return (
    <div className="flex items-center gap-4">
      <Toggle variant="outline" aria-label="Toggle bold">
        <BoldIcon />
      </Toggle>

      <ToggleGroup type="multiple" variant="outline" spacing={0}>
        <ToggleGroupItem value="bold" aria-label="Toggle bold">
          <BoldIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Toggle italic">
          <ItalicIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="underline" aria-label="Toggle underline">
          <UnderlineIcon />
        </ToggleGroupItem>
      </ToggleGroup>
    </div>
  )
}

Why Use the Shadcn Toggle Component

• Clear state: The pressed state is visible on the button and announced to screen readers, so users always know what is on.
• Single or multiple: One ToggleGroup prop switches between radio like and checkbox like behavior.
• Compact: Icon toggles fit many options into a small toolbar without menus or dropdowns.
• Keyboard navigation: Toggle groups use roving focus, so arrow keys move between items and the group is one tab stop.
• Consistent styling: Variants and sizes match the rest of shadcn/ui, and the on state is a data attribute you can restyle.

Common Toggle Use Cases

• Text editor toolbars: Bold, italic, underline and alignment controls in rich text and markdown editors.
• Favorites and bookmarks: Heart, star and bookmark buttons on products, posts and articles.
• View switchers: Switching between list, grid and board views in dashboards and file managers.
• Filters: Quick filter chips such as In stock or On sale that users turn on and off.
• Media controls: Mute, repeat and shuffle buttons in audio and video players.

Customizing the Shadcn Toggle

A toggle exposes data-state="on" or "off", so the active style is one Tailwind variant away. You can fill the icon, change the background or switch the border color only when the toggle is on. For groups, the spacing prop controls the gap between items and orientation="vertical" stacks them. Colors come from your theme, which you can generate with the free Theme Generator.

This toggle fills its heart icon when pressed:

<Toggle
  variant="outline"
  aria-label="Add to favorites"
  className="rounded-full data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-destructive data-[state=on]:*:[svg]:stroke-destructive"
>
  <HeartIcon />
</Toggle>

Toggle Accessibility and Keyboard Support

A single Toggle is a button with aria-pressed, so screen readers announce it as a toggle button and read whether it is pressed. A ToggleGroup with type="single" is exposed as a radio group whose items report aria-checked, while a multiple group is a toolbar of pressed buttons. In both, only one item is in the tab order at a time, and the arrow keys move focus between items. Always give icon only toggles an aria-label, and keep the label the same in both states; the pressed state already tells users whether it is on.

Toggle Best Practices

• Use a toggle only when the effect is immediate and visible; use a switch for saved settings.
• Make the on state obvious with more than a subtle background change, for example a filled icon.
• Give every icon only toggle an aria-label that describes the option, not the current state.
• Choose type="single" for exclusive options like alignment and type="multiple" for independent options like bold and italic.
• Add a tooltip to icon toggles in toolbars so users can learn what each one does.
• Keep toggles in a group the same size and variant so the toolbar reads as one control.

Components Related to Toggle

Shadcn Toggle FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.