Radio Buttonbeta

The Radio Button is a boolean control that is used when there is a list of mutually exclusive choices and only one of those can be selected.

AnatomyPermalink to: Anatomy

1. Selected indicator: Indicates whether the Radio Button is selected.
2. Control container: Contains the indicator.
3. Label: Text that describes the purpose of the Radio Button.
4. Description: Text that adds context to help the user.

UsagePermalink to: Usage

Align Radio Buttons vertically as it makes it easier for the user to distinguish which input belongs to which label.

When to usePermalink to: When to use

• Use when there are between two and four options available.

When not to usePermalink to: When not to use

• When the options exceed four, use a Select or an alternative UX pattern.
• When there is only one option to toggle, use a Checkbox.

AccessibilityPermalink to: Accessibility

A list of Radio Buttons should always be described using a group name, eg. if the options are “1 Month”, “3 Months” and “6 Months”, the group name could be “Subscription Length”.

For grouping Radio Buttons, use the Fieldset component.

ExamplesPermalink to: Examples

DefaultPermalink to: Default

import { RadioButton } from "@peakon/bedrock/react/form";
            
<RadioButton 
  value="default" 
  name="default-radio" 
  label="Default radio button" 
/>

ControlledPermalink to: Controlled

You can make Radio Buttons controlled with the checked and onChange props. The Radio Button with a checked prop that evaluates to true will be selected. Pass a function to onChange that handles the change behavior.

import { useState } from 'react'; 
import { RadioButton } from "@peakon/bedrock/react/form";

const [value, setValue] = useState("controlled-01");
      
<RadioButton 
  value="controlled-01"
  name="controlled-radio"
  label="Option 1"
  checked={value === "controlled-01"}
  onChange={event => setValue(event.target.value)
/>
<RadioButton
  value="controlled-02"
  name="controlled-radio"
  label="Option 2"
  checked={value === "controlled-02"}
  onChange={event => setValue(event.target.value)
/>

With descriptionPermalink to: With description

import { RadioButton } from "@peakon/bedrock/react/form";
              
<RadioButton
  value="with-description"
  name="radio-with-description"
  label="Radio button with description"
  description="Explanatory text that provides more context"
/>

DisabledPermalink to: Disabled

import { RadioButton } from "@peakon/bedrock/react/form";

<RadioButton
  value="disabled"
  name="disabled-radio"
  label="Disabled radio button"
  disabled
/>

Props TablePermalink to: Props Table

Props extend from the HTML input element(external link), with the exception of className, style, type, aria-labelledby and aria-label.

RelatedPermalink to: Related

• Component: Checkbox
• Component: Fieldset
• Component: Select
• Component: Toggle Group

ReferencesPermalink to: References

• Norman Nielsen Group: Checkboxes vs Radio Buttons(external link)
• Norman Nielsen Group: Radio Buttons: Select One by Default or Leave All Unselected?(external link)