shadcn.io is an independent project built on shadcn/ui

Components

Free

Toggle for React Aria

Q: How do I make an outline Toggle?

Set variant="outline" for a bordered Toggle, as the Outline demo does; the default variant is borderless with a transparent background. The pressed style comes from the data-state attribute in both.

Q: How do I change the size of a Toggle?

Set size to sm, md (the default) or lg, as the Sizes demo does; default is another name for md, as in shadcn/ui. For an icon-only Toggle, keep the icon alone inside it and add an aria-label.

Q: How do I make an icon-only Toggle accessible?

Give it an aria-label that names the action, such as "Toggle bold": screen readers announce it with its pressed state. Mark the icon aria-hidden="true" so it is not read twice.

Q: How do I style the pressed state of a Toggle?

Use the data-state attribute, which is on or off, or data-pressed, for example data-[state=on]:bg-accent. To change every Toggle, edit the Toggle file in your ui folder.

A pressed-or-not button for bold, bookmark and other toolbar tools. For React with React Aria, when the pressed look is the state, not a one-time click.

Press once and it stays on, like bold or bookmark in a toolbar. Press again and it turns off.

Use a toggle when the button itself is the state. A feature you turn on for the whole account is a Switch. In React, React Aria provides the pressed style.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

import { BookmarkIcon } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";

<Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
  <BookmarkIcon
    aria-hidden="true"
    className="group-aria-pressed/toggle:fill-foreground"
  />
  Bookmark
</Toggle>

Accessibility

Space: Toggle the pressed state.
Enter: Toggle the pressed state.

Demos

Outline

Italic and Bold, each with an icon and a word, and variant set to outline so the resting state has a border. Use the outline when the toggle sits on a busy toolbar and the borderless default would disappear. Both can be pressed at once, because these are separate toggles, not a group that forces a single choice.

PreviewCode

Text

Italic with an icon and a visible word, on the default variant, which has no border until it is pressed. Use the word beside the icon when the action is not obvious from the glyph alone. The aria-label still names the action for assistive tech. If you only have room for the icon, drop the word and keep that label.

PreviewCode

Sizes

Small, default, and large, all outline, using size values sm, md, and lg. md is what you get if you omit the prop. Pick a smaller toggle for a dense toolbar and a large one when the control is a primary target on a touch layout. The pressed treatment stays the same at every size.

PreviewCode

Disabled

Two toggles that cannot be pressed, one on the default variant and one outline, both with disabled. The muted look follows the variant you started from, so the outline toggle stays outlined. Use this when the action does not apply yet, such as bold with an empty selection, not to hide a control that is broken.

PreviewCode

Rtl

The bookmark toggle from the first preview, with dir set to rtl and an Arabic label. The icon still fills when the toggle is pressed. The word sits on the right, which is the start in this direction. Use this to check that the pressed icon and the label do not collide in a right-to-left toolbar.

PreviewCode

FAQ

How do I control a Toggle in React?

Keep the pressed state in state and pass it back to the Toggle; use the default prop when you only need the starting state. With React Aria, pass isSelected and onChange, which receives the new boolean.

What is the difference between a Toggle and a Switch?

A Toggle is a button that stays pressed, like Bold in a text editor toolbar, and is announced as a pressed button. A Switch turns a setting on or off, like Wi-Fi. Use Toggle Group for a row of related toggles.

How do I make an outline Toggle?

Set variant="outline" for a bordered Toggle, as the Outline demo does; the default variant is borderless with a transparent background. The pressed style comes from the data-state attribute in both.

How do I change the size of a Toggle?

Set size to sm, md (the default) or lg, as the Sizes demo does; default is another name for md, as in shadcn/ui. For an icon-only Toggle, keep the icon alone inside it and add an aria-label.

How do I make an icon-only Toggle accessible?

Give it an aria-label that names the action, such as "Toggle bold": screen readers announce it with its pressed state. Mark the icon aria-hidden="true" so it is not read twice.

How do I style the pressed state of a Toggle?

Use the data-state attribute, which is on or off, or data-pressed, for example data-[state=on]:bg-accent. To change every Toggle, edit the Toggle file in your ui folder.

How do I install the Toggle in React?

Run the command in the Installation section above: it adds the Toggle to your ui folder. The command uses the shadcn CLI.

API Reference

Toggle

data-slot="toggle"

PropType

children?ReactNode

The content to display in the button.

defaultSelected?boolean

Whether the element should be selected (uncontrolled).

isDisabled?boolean

Whether the button is disabled.

isSelected?boolean

Whether the element should be selected (controlled).

onChange?(isSelected: boolean) → void

Handler that is called when the element's selection state changes.

Parameters: isSelected – boolean
Returns: void

size?"sm" | "md" | "default" | "lg"

The size.

Type: "sm" | "md" | "default" | "lg"
Default: "md"

value?string

The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).

variant?"default" | "ghost" | "outline"

The visual style.