Toggle

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 tailwind-merge

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

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

Component API

Toggle

The Toggle component is a pressable control that can stay selected.

See the React Aria for the full API reference.