Form

Radio Buttons

A radio button allows users to select exactly one option from a list of mutually exclusive options.
View source
An optional description.
1
import {RadioSelectConnected, Radio, Label} from '@coveord/plasma-react';
2


3
const Demo = () => (
4
    <RadioSelectConnected
5
        id="radio-select-id"
6
        valueOnMount="1"
7
        disabledValuesOnMount={['3']}
8
        disabledTooltip="This option is disabled"
9
    >
10
        <Radio id="Option1" name="enabledOptions" value="1">
11
            <Label>Option 1</Label>
12
        </Radio>
13
        <Radio id="Option2" name="enabledOptions" value="2">
14
            <Label>Option 2</Label>
15
            <div className="mod-align-with-radio-label">An optional description.</div>
16
        </Radio>
17
        <Radio id="Option3" name="enabledOptions" value="3">
18
            <Label>Option 3</Label>
19
        </Radio>
20
    </RadioSelectConnected>
21
);
22
export default Demo;

Props

NameTypeDefaultDescription
children(ReactElement<FunctionComponent<RadioProps> | FunctionComponent<RadioCardProps>, string | JSXElementConstructor<any>>[] | ReactElement<...>[]) & ReactNode
Radio options of the RadioSelect. Each child must be a Radio or a RadioCard
classNamestring
Additional CSS classes to set on the outermost element
disabledbooleanfalse
When disabled, the RadioButtons cannot be selected or unselected
disabledTooltipstring
The text displayed when hovering over a disabled Radio button
disabledValuesOnMountstring[]
Value of the initially disabled radio options
idstring
A unique identifier used to indentify the RadioSelect in the PlasmaState
namestring
See [input's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-name)
onChange(value: string, id?: string, e?: MouseEvent<HTMLElement, MouseEvent>) => void
A callback function executed when the selected Radio option changes
  • value–The value of the selected option
  • id–The unique identifier of the radio select
  • e–The change event
onChangeCallback(value: string, id?: string, e?: MouseEvent<HTMLElement, MouseEvent>, disabled?: boolean) => void
A callback function executed when the selected Radio option changes
  • value–The value of the selected option
  • id–The unique identifier of the radio select
  • e–The change event
valueOnMountstring
Value of the initially selected radio option

Examples

Radio cards
1
import {RadioSelectConnected, RadioCard, Label} from '@coveord/plasma-react';
2


3
const Demo = () => (
4
    <RadioSelectConnected
5
        id="radio-card-select-example"
6
        valueOnMount="1"
7
        className="flex flex-wrap"
8
        disabledValuesOnMount={['2']}
9
        disabledTooltip="This option is disabled"
10
    >
11
        <RadioCard id="Option1" name="card-option" value="1">
12
            <img className="mb2" src="https://via.placeholder.com/150x100" />
13
            <Label>Option 1</Label>
14
            <div>Description for the first option.</div>
15
        </RadioCard>
16
        <RadioCard id="Option2" name="card-option" value="2">
17
            <img className="mb2" src="https://via.placeholder.com/150x100" />
18
            <Label>Option 2</Label>
19
            <div>Description for the second option.</div>
20
        </RadioCard>
21
        <RadioCard id="Option3" name="card-option" value="3">
22
            <img className="mb2" src="https://via.placeholder.com/150x100" />
23
            <Label>Option 3</Label>
24
            <div>Description for the third option.</div>
25
        </RadioCard>
26
    </RadioSelectConnected>
27
);
28
export default Demo;

Best Practices

Use radio buttons when users need to select a single option from a short list.

Radio buttons always come in a set of two or more options.

When presenting only two options,

  • For an on/off choice, use a Toggle. Example: Enable dark mode.
  • For a yes/no choice, such as opt in/out, use a stand-alone Checkbox. Example: Receive email notification.
  • When it’s neither, use a radio button. Examples: Choose between red or blue.

Aim for seven or less options. If that's impossible, consider using the Single select instead.

Sort options by most relevant, unless a more suited ordering rationale applies. For example, when listing size (large to small) or security level options (full access to limited access). If no rationale stands out, place options in alphanumerical order.

Labeling

Keep titles and labels short, preferably under three words.

Title

A set of radio buttons must have a title that identifies the type of options available.

Provide a descriptive title without action verbs. For example, write "Print layout" rather than "Select a print layout".

Labels

Labels identify each option and should be self-explanatory.

Use a consistent writing style for all options in the list.

Feedback and Validation

Always preselect an option as the default. The default option can identify:

  • The recommended path when you want to assist the user.
  • The most commonly selected option when you want to help expedite the task. If preselecting a default option increases the risk of irreversible changes or security issues, always use the least risky option as the default.

When the user needs to be able to easily revert to the default option, for instance when testing configurations, add “(recommended)” or “(default)” to the appropriate option label.

If the choice is optional, add a neutral option (e.g., "None") so the user can explicitly choose to not select any option.

Related Components

If your use case doesn't match the guidelines above, consider using one of the following components instead:

  • Single select - When there are more than seven options.
  • Toggle - When the options are binary (e.g., on/off).
  • Checkbox - When the user can chose any number of options (from none to all of them).
Edit guidelines