Switch Group

Overview

Switch Group combines a switch with its label, badge, and text link into a single cohesive unit. It handles placement and content visibility in one component, so you can drop it into any settings panel, preference list, or form without manual alignment. Every piece stays editable as a nested instance.

When should you use them?

Use a switch group whenever a switch needs more than a bare toggle, such as a labeled setting with helper text, a preference with an inline link, or a settings row that needs consistent alignment. It keeps the switch and its supporting content aligned without manual spacing.

How should you use them?

• Use it instead of assembling a switch, label, and helper by hand, to keep alignment consistent.
• Choose Left or Right placement to match reading direction or platform convention.
• Use helper text to explain what the setting does, especially when the effect isn't obvious.
• Toggle the text link on for settings that link to more detail or related pages.
• Keep the switch applying its change immediately, with no separate save step.
• Keep the full row clickable and keyboard-accessible for an easy target.