---
title: Toggle
description: A button that stays down, and the single-select group of them - aria-pressed is the whole contract.
source: https://adamjurek.com/components/toggle
---
## Home
A button that stays down: `aria-pressed` and `data-active` mirror the
`pressed` prop, and clicking hands back its opposite - the state itself lives
on the caller. `ToggleGroup` wraps a row of them behind one `value`, for a
single-select set of mutually exclusive options like a device or size picker.
## Why it is built this way
`aria-pressed` is the entire contract, because the showcase's own device row
had already been drawing this shape for a while before it got a public name -
Toggle just gives it one. The component holds no state itself; it renders
`pressed` and calls back with its opposite. `ToggleGroup` is single-select
because that's what every use of it here has actually wanted; multi-select is
just several Toggles, each holding its own `pressed`.
> [!NOTE] Install commands are not written here
> Anything in `packages/ui/registry.ts` gets its TanStack and shadcn commands
> attached automatically, so there is nothing to keep in sync.
## Install
### TanStack
```shell
tanstack add https://adamjurek.com/r/tanstack/toggle.json
```
### shadcn
```shell
pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/toggle.json
```
### pnpm
```shell
pnpm add @sushindustries/ui @sushindustries/atoms
```
## What you get
| | |
| --- | --- |
| Version | 0.1.0 |
| Category | content ยท Actions |
| Files | `toggle.tsx` |
| Dependencies | None |
| Tags | button, group, no-deps |
> [!NOTE] No runtime dependencies
> It brings nothing with it beyond the stylesheet.
## Get Started
Install commands are on Home, attached from the registry - they are not written
here, because a second copy is a copy that goes stale. This tab starts after the
install worked.
## Use it
```tsx
import { useState } from "react";
import { Toggle } from "@sushindustries/ui";
export function Example() {
const [pressed, setPressed] = useState(false);
return (
Bold
);
}
```
## What you should see
A button that looks pressed after a click - a slightly darker fill, a
firmer border - and stays that way until clicked again. `aria-pressed`
flips with it, so a screen reader announces the change as well.
## If nothing happens
`Toggle` has no state of its own - `pressed` is entirely the caller's, so a
click that never updates `pressed` (a missing `onPressedChange`, or one
that does not call `setState`) looks exactly like a broken button: it
fires, and nothing about it changes.
## Guides
## Composing it
`Toggle` holds no state - it renders `pressed` and calls
`onPressedChange(!pressed)` on click, nothing more. Somewhere above it has
to own that boolean, the same as a controlled ``; a `Toggle` with a
`pressed` prop that never changes is a button that looks stuck because it
is stuck.
## Toggle vs ToggleGroup
`Toggle` is one button and one boolean. `ToggleGroup` is a row of them
sharing a single `value`, wrapped in a `