Skip to main content
🏠FormRadio

Radio

Radio buttons are used when you have a group of mutually exclusive choices and only one selection from the group is allowed.

Sizes​

Radios are available in three sizes to cater for the diverse range of use cases and devices that our business uses. By default, the medium radio is used.

<RadioButton name="size" size="small" checked>Small</RadioButton>
<RadioButton name="size" size="medium">Medium</RadioButton>
<RadioButton name="size" size="large">Large</RadioButton>

Selection​

Radios can be checked by adding checked attribute.

<RadioButton size="small" checked>Small</RadioButton>
<RadioButton size="medium" checked>Medium</RadioButton>
<RadioButton size="large" checked>Large</RadioButton>

Colors​

Radios are available in two colors: primary and neutral. The default color is the primary color.

<RadioButton name="primary" color="primary" checked>Primary Checked</RadioButton>
<RadioButton name="primary" color="primary">Primary Unchecked</RadioButton>

<RadioButton name="neutral" color="neutral" checked>Neutral Checked</RadioButton>
<RadioButton name="neutral" color="neutral">Neutral Unchecked</RadioButton>

Errors​

Radios can also have an error state to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid.

<RadioButton name="primary-error" checked error>Primary Checked</RadioButton>
<RadioButton name="primary-error" error>Primary Unchecked</RadioButton>

<RadioButton name="neutral-error" color="neutral" checked error>Neutral Checked</RadioButton>
<RadioButton name="neutral-error" color="neutral" error>Neutral Unchecked</RadioButton>

Disabled​

Radios can be disabled by adding the disabled attribute.

<RadioButton name="primary-disabled" checked disabled>Primary Checked</RadioButton>
<RadioButton name="primary-disabled" disabled>Primary Unchecked</RadioButton>

<RadioButton name="neutral-disabled" color="neutral" checked disabled>Neutral Checked</RadioButton>
<RadioButton name="neutral-disabled" color="neutral" disabled>Neutral Unchecked</RadioButton>

Custom labels​

Radios accepts any component as its label. Make sure to use items with clear textual labels, or elements that are self explanatory in the given context.

<RadioButton checked>
  <div>
    <Typography>Option 1</Typography>
    <Typography variant="caption-1" classes="text-bluegrey-500">
      This is some placeholder help text.
    </Typography>
  </div>
</RadioButton>

Radio Group​

RadioGroup is a helpful wrapper used to group radio elements. Make sure that RadioGroup component has a name attribute.

<RadioGroup name="radioGroup1">
  <RadioButton checked>Radio 1</RadioButton>
  <RadioButton>Radio 2</RadioButton>
  <RadioButton>Radio 3</RadioButton>
</RadioGroup>

Sizes​

RadioGroup are available in three sizes that correspond to the different bottom margin values and size of their child elements. By default, the medium size is used.

<RadioGroup size="small" name="radioGroupSizeSmall">
  <RadioButton checked>Radio 1</RadioButton>
  <RadioButton>Radio 2</RadioButton>
  <RadioButton>Radio 3</RadioButton>
</RadioGroup>

<RadioGroup size="medium" name="radioGroupSizeMedium">
  <RadioButton checked>Radio 1</RadioButton>
  <RadioButton>Radio 2</RadioButton>
  <RadioButton>Radio 3</RadioButton>
</RadioGroup>

<RadioGroup size="large" name="radioGroupSizeLarge">
  <RadioButton checked>Radio 1</RadioButton>
  <RadioButton>Radio 2</RadioButton>
  <RadioButton>Radio 3</RadioButton>
</RadioGroup>

Value​

You can set a default value for a radio button group by using defaultValue attribute. And you can also control value of this group by using value attribute.

<RadioGroup defaultValue="radio1" name="radioGroup">
  <RadioButton value="radio1">Radio 1</RadioButton>
  <RadioButton value="radio2">Radio 2</RadioButton>
  <RadioButton value="radio3">Radio 3</RadioButton>
</RadioGroup>

Event Handling​

RadioButton​

The RadioButton component provides an onChange event handler that is triggered when the radio button is selected.

const handleChange = (event) => {
  // event.target.checked contains the selection state (true when selected)
  console.log('Radio button checked:', event.target.checked);
  
  // event.target.value contains the radio button value
  console.log('Radio button value:', event.target.value);
  
  // You can perform actions based on the selection
  if (event.target.checked) {
    setSelectedOption(event.target.value);
    updateUserPreference(event.target.value);
  }
};

<RadioButton 
  value="option1" 
  onChange={handleChange}
>
  Option 1
</RadioButton>

RadioGroup​

The RadioGroup component also provides an onChange event handler that is triggered when a radio button in the group is selected. This simplifies event handling for a set of radio buttons.

const handleGroupChange = (event) => {
  // event.target.value contains the value of the selected radio button
  console.log('Selected value:', event.target.value);
  
  // You can update state or perform other actions
  setSelectedOption(event.target.value);
  
  // Example: load data based on the selected option
  if (event.target.value === 'option1') {
    loadDataForOption1();
  } else if (event.target.value === 'option2') {
    loadDataForOption2();
  }
};

<RadioGroup onChange={handleGroupChange} name="options">
  <RadioButton value="option1">Option 1</RadioButton>
  <RadioButton value="option2">Option 2</RadioButton>
  <RadioButton value="option3">Option 3</RadioButton>
</RadioGroup>

Note that when a radio button is disabled (disabled={true}), the onChange event will not be triggered for that button.

Custom Classes​

Add your own classes in the `