Radio

Radios allow the user to select a single choice from a a list of two or more options that are mutually exclusive.

Overview

Resources

Install

yarn add @activecampaign/camp-components-radio

Variations

Individual radio

 Use when radios are not grouped together under a group label. A single radio should never appear alone.

import Radio from '@activecampaign/camp-components-radio';
 
export default function ({ ...props }) {
  const [checked, setChecked] = useState(false);
 
  return (
    <Radio value="apple" checked={checked} onChange={(status) => setChecked(status)}>
      Apple
    </Radio>
  );
}

Radio group

Use the radio group when radio items are exclusive to each other and closely related. Radio group is typically used under a group label, which can be added using the text component.

import React, { useState } from 'react';
import Radio from '@activecampaign/camp-components-radio';
import Flex from '@activecampaign/camp-components-flex';
import Text from '@activecampaign/camp-components-text';
 
export default function ({ ...props }) {
  const [option, setOption] = useState('apple');
 
  return (
    <Flex
      direction="column"
      styles={{
        gap: 'sp300',
      }}
    >
      <Text.Body as="p" weight="fwMedium">
        Radio button group label
      </Text.Body>
      <Radio.Group name={args.name} onChange={(value) => setOption(value)} value={option} {...args}>
        <Radio value="apple">Apple</Radio>
        <Radio value="banana">Banana</Radio>
        <Radio value="orange">Orange</Radio>
      </Radio.Group>
    </Flex>
  );
}

Usage

Best practices

• When grouped, radios should be in some logical order that makes it easy for the user to read and understand, whether that is numerical or alphabetical or some other contextually-based grouping.
• Multiple radios should always be displayed vertically, even if not in a grouping. An exception to this rule would be two radios with extremely short labels, such as “yes” and “no” options.
• Radio groupings are perfect for 10 or less options. If there are more to choose from, use a dropdown instead.

Content guidelines

Radio labels should be clearly written, in sentence case and avoiding punctuation at the end.

Accessibility

Keyboard support

• Move focus to each radio using the tab key, or shift + tab to move backwards
• To interact with the radio when it has keyboard focus, press the space key

Similar components

Checkbox

Allows users to select one or more items from a set.

Dropdown

Allows users to select an option from a dropdown menu.