Chapter 35: Toggle

Core Idea

A single two-state (on/off) button — the simplest pressed/unpressed control in the library, one part, no coordination with siblings.

Key Concepts

• Single part: just Toggle.Root — pressed/defaultPressed, onPressedChange, disabled.
• [data-state]: "on" | "off" — style directly off this instead of tracking pressed state separately in your component's own class logic.

Key Takeaways

1. Use Toggle for a single independent on/off button (e.g. a bold/italic formatting button); reach for ToggleGroup as soon as you have more than one related toggle button that should coordinate.
2. Space/Enter both activate it — standard button keyboard behavior, no extra wiring needed.

Connects To

• Toggle Group: the coordinated multi-button version of this same on/off pattern.