Radio

The <Radio> and <Radio.Group> components allow users to select one option from a set of options. They are useful for presenting a list of options to users and collecting their responses.

The <Radio.Group> not only groups the radio buttons but also manages their state. This means you can easily control which option is selected by default and dynamically update the selection based on user interactions.

Anatomy

The radio button component is comprised of a set of clickable circles (the inputs) with text labels positioned to the right. If there is a group of radio buttons, a group label can be added.

• Group label: Describes the group of options or provides guidance for making a selection.
• Radio button input: Indicates the state of a radio button. By default, no option will be preselected.
• Radio button label: Describes the information you want to select or unselect.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Usage

Radio buttons are used for mutually exclusive choices, where only one option can be selected at a time. They are ideal when you want the user to choose a single option from a small list of predefined choices. When a user selects a new option, the previous choice is automatically deselected.

The <Radio> should never be used alone because radio buttons are designed for selecting one option from multiple mutually exclusive choices. For that the <Radio.Group> should be wrapped around the <Radio>. If you want one option you could use the <Checkbox> instead.

Overflow content

We recommend radio button labels being fewer than three words because shorter radio button labels improve readability and reduce cognitive load, making it easier for users to quickly understand and select options. This enhances the overall user experience, especially on small screens.

If you are tight on space, consider rewording the label. Do not truncate radio button label text with an ellipsis.

Long labels may wrap to a second line, and this is preferable to truncation. Text should wrap beneath the radio button.

Do

If the label is long, wrap to a second line.

Don't

Do not truncate radio button label text with an ellipsis.

Number of options

Radio groups are most effective with a small set of choices that can be taken in at a glance. Once the list grows to around five or more options, scanning becomes slower and the vertical space required increases. If the number of options falls into a moderate range, roughly five to fifteen, use the select component instead to keep the interface compact and maintain scanning efficiency.

Do

Use select component with long options

Don't

Don't use radio with long options.

When a radio group is long enough to create clutter, overload, or excessive scrolling, keep it compact while ensuring all options remain accessible. Present only the most relevant five to eight choices initially, with the rest hidden until revealed. Apply this approach sparingly when all options can be scanned easily without causing frustration.

import { Radio } from '@marigold/components';export default () => (  <Radio.Group    label="Preferred Event Activity"    defaultValue="no-preference"    collapseAt={5}  >    <Radio value="no-preference">No Preference</Radio>    <Radio value="networking">Networking Session</Radio>    <Radio value="workshop">Workshop</Radio>    <Radio value="panel">Panel Discussion</Radio>    <Radio value="keynote">Keynote Speech</Radio>    <Radio value="qna">Q&amp;A Session</Radio>    <Radio value="roundtable">Roundtable</Radio>    <Radio value="team-building">Team Building</Radio>    <Radio value="hackathon">Hackathon</Radio>    <Radio value="social">Social Gathering</Radio>  </Radio.Group>);

Ordering of Options

Options should be arranged by relevance to help users find what they need quickly. Prioritizing by factors such as frequency of use, overall popularity, or recency of interaction ensures the most useful items appear first. Alphabetical order should be considered only when no meaningful ranking criteria are available, as it may not align with user priorities or usage patterns.

Single vs. multiple selection

Use radio buttons when users must choose only one option from a group. For example, selecting a payment method like Credit Card, PayPal, or Invoice, or picking a seat category such as Balcony, Orchestra, or Standing.

Radio buttons are best when the options are mutually exclusive, the user is required to make a choice, and the number of options is limited and visible. If users can select more than one option, use checkboxes instead, such as when subscribing to event categories (Concerts, Theater, Sports) or enabling account notifications (Email, SMS, App), where each option is independent.

Props

Radio

Radio.Group

Alternative components

Choosing the right alternative to radio buttons is important for providing an optimal user experience, especially when different types of selections are required. Depending on the nature of the choices and the desired interaction, the following components can serve as an alternative to radio buttons:

• Select: Ideal when the user needs to choose one option from moderate number of options (e.g., 5-15) to choose from. Unlike radio buttons, which display all options at once, a select component can hide the options until needed, saving space in the UI.

Related