Skip to main content
Bedrock Design System

Radio Button

Generally when using Radio Buttons, you want to wrap them in a Fieldset Component

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

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

function Snippet() {
  return (
    <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.

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

function Snippet() {
  const [value, setValue] = useState("controlled-01");

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

With descriptionPermalink to: With description

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

function Snippet() {
  return (
    <RadioButton
      value="with-description"
      name="radio-with-description"
      label="Radio button with description"
      description="Explanatory text that provides more context"
    />
  );
}

DisabledPermalink to: Disabled

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

function Snippet() {
  return (
    <RadioButton
      value="disabled"
      name="disabled-radio"
      label="Disabled radio button"
      disabled
    />
  );
}

Props TablePermalink to: Props Table

Props extend from HTML Input Element(external link), with the omission of className, style, type, aria-labelledby and aria-label

NameTypeDescriptionDefaultRequired
refHTMLInputElement

Forwards a ref to the RadioButton.

—No
labelstring

The label that describes the purpose of the RadioButton.

—Yes
descriptionstring

Renders a description below the label to give further information about the RadioButton.

—No
checkedboolean

Used to set the controlled state of the RadioButton.

—No
defaultCheckedboolean

Used to set the uncontrolled state of the RadioButton.

—No

ReferencesPermalink to: References