Resources
Intro & Anatomy
Radio buttons are interactive form controls that allow users to make a single selection from multiple options.
Use radio buttons when users must choose exactly one option from a group, e.g. selecting payment methods or shipping options.
MDX offers radio buttons with or without borders for different visual preferences.
Options & Styles
Label
Labels are always required for radio buttons to clearly communicate the option or choice being presented to users.
Description
Description is optional and provides additional context about the radio buttons option.
Variants
MDX offers two radio buttons variants:
with border and inside padding
without border and no inside padding
States
Radio buttons have multiple interactive states for both unselected & selected:
Default for standard appearance
Hover for interactive feedback
Error for validation failures requiring user attention (only for radio button groups)
Disabled
A disabled radio buttons shows that an option exists but isn't currently available, e.g. when certain conditions haven't been met or prerequisites are missing.
The cursor changes to indicate the radio button is not interactive.
Radio Button Group
Group
Radio Button groups present multiple related options where users can select any combination of choices.
Radio Button groups always require a label to provide clear context for the set of options being presented.
Error
Error messages appear when validation fails, e.g. when required option isn't selected or selection limits are exceeded.
Display messages below the radio button group with clear guidance.
Best Practice & Usage
Radio buttons should be used for mutually exclusive selections where users must choose exactly one option from a group.
Use clear, descriptive labels and ensure all options are visible simultaneously to help users make informed decisions.
For binary on/off choices or immediate state changes, use toggle switches instead.
Use radio buttons to display mutually exclusive options, meaning the user can only choose one.
If the user can choose multiple options, opt for checkboxes instead.
Give each radio button a descriptive and short label.
Don't use unclear or overly long labels, if possible.
While radio buttons should be used vertically, you can opt to place them horizontally where the short nature of the label allows for a horizontal alignment.
Be considerate of white-space and breaks in grids when styling radio button lists. Opt for vertically lists in most cases.
Use a list of radio buttons for seven or fewer options
If you need to display a large list of mutually exclusive options, opt for select menu.
Display radio buttons on full width (100vw, or 100%) on mobile
In order to avoid uneven designs, make sure to not use radio buttons at varying widths. Opt for 100vw instead.
Radio buttons should be used vertically, except for in cases like title where the short nature of the label allows for a vertically alignment.
Be considerate of white-space and breaks in grids when styling radio button lists. Opt for vertically lists instead.
Theming
You can customise colours, border width and radius, font styles, spacing, and paddings to match your design requirements.
For radio button groups, you can also adjust spacing between the group label, individual checkbox items.