Chapter 44: Toggle

Core Idea

A single-part pressed/unpressed button (aria-pressed), the building block for Toggle Group — usable standalone for any single on/off button (bold/italic formatting button, mute button).

Key Concepts

• Anatomy: <Toggle />, one part.
• value: identifies this toggle when used inside a ToggleGroup — irrelevant standalone.
• Controlled/uncontrolled: pressed/defaultPressed/onPressedChange, same convention as checked elsewhere.

Reference Tables

Part	Notable props	Notable data attributes
Toggle	pressed/defaultPressed/onPressedChange, value, nativeButton, disabled	data-pressed, data-disabled

Key Takeaways

1. Use standalone Toggle for a single independent on/off button; move to ToggleGroup (ch045) the moment there's more than one related toggle (e.g. text alignment: left/center/right).

Connects To

• ch045 (Toggle Group): the multi-toggle coordinator this component plugs into.