Radio Buttons
Radio buttons allow users to select a single option from a list of mutually exclusive choices. Material Design 3 radio buttons feature a filled inner circle when selected.
Live Preview
Payment Method
Select Size
Disabled States
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| container.size | dimension | 20px | 20px | 20px |
| container.borderWidth | dimension | 2px | 2px | 2px |
| innerCircle.size | dimension | 10px | 10px | 10px |
| selected.borderColor | color | #6750A4 | #038012 | #1A5129 |
| selected.iconColor | color | #6750A4 | #038012 | #1A5129 |
| unselected.borderColor | color | #79747E | #79747E | #79747E |
| disabled.borderColor | color | #CAC4D0 | #CAC4D0 | #CAC4D0 |
| stateLayer.hoverOpacity | percentage | 8% | 8% | 8% |
| stateLayer.focusOpacity | percentage | 12% | 12% | 12% |
| stateLayer.pressedOpacity | percentage | 12% | 12% | 12% |
| touchTarget.minSize | dimension | 48px | 48px | 48px |
Usage Guidelines
- Use radio buttons when users must select exactly one option from a list
- Always provide at least two options - if there is only one option, consider using a checkbox instead
- List options in a logical order (alphabetical, numerical, or by frequency of use)
- Keep option labels concise and distinct from each other
- Consider a default selection if one option is recommended