Radio

Introduction

Radio buttons allow users to select exactly one option from a set of mutually exclusive choices. They make all available options visible at once, helping users understand the full scope of their choices before making a selection.

Variants

• Basic radio: Standard radio button appearance for most use cases
• Radio button: Button-styled radio for more prominent, touch-friendly selections
• Radio card: Card-based layout for options requiring additional context or visuals

Interactive demo

Try the interactive demo below to explore different radio styles, sizes, and configurations.

Best practices

• Number of radios: 2-7 options per group (recommended)
• Pre-select: You should pre-select an option in most cases. If users truly need to make an explicit choice without guidance, include a "None" or "No preference" option as the default
• Group visually: Ensure related radio buttons appear as a cohesive group
• Logical order: Arrange options in a meaningful sequence (alphabetical, chronological, or by popularity)
• Vertical layout: Stack radio buttons vertically for easier scanning (horizontal only for 2-3 short options)

Alert state

Use the alert state to indicate an invalid selection that needs correction. Combine with helper text to explain why the alert state is triggered.

Disabled

Use sparingly. Always explain why an option is disabled, either through helper text or by restructuring the interface to hide unavailable options entirely.

Radio in components

Radio can be used within various components. See the links below for more information on how radio can be integrated with these components.