Radio
Description
Radio buttons are interactive input elements that allow users to select a single option from a predefined set of choices. They consist of a small circular button and a label, offering clear visual feedback when an option is selected. Selecting one radio button will automatically deselect any other selected option within the same group.
Our radio button labels are displayed using standard or small text formatting where appropriate, rather than traditional label text styling, to maintain a consistent visual hierarchy and user-friendly design.
Usually, radio buttons need to be preceded by a topic, a question or an explanation. Depending on the structure of the form, this can be in the form of a heading or body text. In rare cases, where only a small amount of text is required, this can also take the form of a label.
Use Cases
Radio buttons are used when a user must select only one option from a list. They should be clear, accessible, and easy to use. If there are fewer than five options, use radio buttons instead of a select field for better visibility.
Use radio buttons if the user must confirm before applying a change. Use a toggle switch instead for settings that take effect immediately.
Usage
Labels: Labels should clearly indicate what the choice means. Avoid generic labels like “Option 1”, “Option 2” - be specific. Use concise labels and avoid unnecessary wording. If radio buttons belong to a category, use a group label to provide context.
Order: Arrange choices in a natural order. For numerical or progressive values, sort low to high.
Defaults: If one option is more commonly selected, pre-select it. If no default makes sense, keep all unselected but ensure the user must pick one before submitting.
Interaction: Users should be able to click anywhere on the label, not just the small radio button.
Spacing: Leave enough space between radio buttons to prevent misclicks, especially on mobile.
Keyboard Support: Use keyboard navigation: Tab to move between groups, Arrow keys to select an option, Space/Enter to confirm a selection.