Radio Group

Overview

Radio Group combines a radio button with its label, badge, and text link into a single cohesive unit. It handles placement, validation, and content visibility in one component, so you can drop it into any form or settings panel without manual alignment. With 3 variants and 3 sizes, every piece stays editable as a nested instance.

When should you use them?

Use a radio group whenever a radio option needs more than a bare button, such as a labeled choice with a badge, an option with an inline link, or a settings row that needs consistent alignment. It keeps the radio and its supporting content aligned without manual spacing.

How should you use them?

• Use it instead of assembling a radio, label, and link by hand, to keep alignment consistent.
• Repeat it for each option in a single-selection set, since one radio is never used alone.
• Choose Left or Right placement to match reading direction or platform convention.
• Toggle the text link on for options that need an inline link.
• Use the Danger variant to show validation errors directly on the option.
• Keep the full row clickable and keyboard-navigable with arrow keys.