Toggle

Basic

A toggle button allows users to switch between two states, such as enabling or disabling a feature.

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/toggle

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components tailwind-variants

Intent

Customize the look of the toggle button using the intent prop.

Size

Adjust the toggle button's size using the size prop.

Controlled

Manage the toggle button's state with the isSelected prop.

Disabled

Disable a toggle button by setting the disabled prop.

Touch hitbox

Sometimes you may want to use this button with only an icon. In that case, you can apply the touch-target utility class on the sq-* size to increase the button’s hitbox for improved accessibility.

@utility touch-target {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 44px;
    min-width: 44px;
    z-index: 9999;
  }
}