Toggle

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/toggle

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components tailwind-variants cn

Examples

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

Set isDisabled to disable the toggle button.

Touch hitbox

For icon-only buttons, use a sq-* size and the touch-target utility to increase the interactive area.

@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;
  }
}

Component API

Toggle