Skip to main content

Radio

Used when when only one choice may be selected from a series of options.

Import

import { Radio } from '@pluralsight/react'

Anatomy

  1. Container
  2. Control
  3. Input
  4. Label

Usage

Basic Radio

function RadioList() {
  const [options, setOptions] = useState('')

  function handleSetOptions(e) {
    setOptions(e.target.value)
  }

  return (
    <FormControlProvider>
      <Fieldset name="option">
        <Legend>Choose an option</Legend>
        <Radio
          checked={options === '1'}
          id="option1"
          onChange={handleSetOptions}
          value="1"
        >
          Option 1
        </Radio>
        <Radio
          checked={options === '2'}
          id="option2"
          onChange={handleSetOptions}
          value="2"
        >
          Option 2
        </Radio>
        <Radio
          checked={options === '3'}
          id="option3"
          onChange={handleSetOptions}
          value="3"
        >
          Option 3
        </Radio>
      </Fieldset>
      <FieldMessage>This will be added to your profile.</FieldMessage>
    </FormControlProvider>
  )
}

States

Customizing

There are 3 ways to customize the Radio component.

1. Unused Classes

Each component layer of the Radio has a unused class name that can be utilized in your local CSS to customize the Radio at any level.

  1. pando-radio-container: The container element of the Radio.
  2. pando-radio-input: The input element of the Radio.
  3. pando-radio-control: The control element of the Radio.

2. Passing a className prop

You can pass a className prop to the Radio component to customize the Radio. This is useful if your project uses CSS Modules or a CSS-in-JS library like Emotion.

import customStyles from './customStyles.module.css'

function CustomRadio(props) {
  return <Radio className={customStyles.custom} {...props} />
}

3. Ejected Radio

For a low-level "ejected" approach, you can use the Headless-styles API to customize the Radio however you prefer while keeping the accessibility behavior.

import { getRadioProps } from '@pluralsight/headless-styles'

To learn more about the Headless-styles API, check out the Headless-styles documentation.

Behavior

Layout

Do use multiple Radios in a vertical list.

Don't use multiple Radios in a single row.

Do provide a Label with a Radio.

Don't use a Radio inline without a Label.

Usage

Do use a Radio for giving users a group of options from which they can select a single item.

Don't use a Radio for showing/hiding content.

API

Parameters

type RadioProps = InputHTMLAttributes<HTMLInputElement>
  1. Any props that the HTMLInputElement accepts

Accessibility

The Pando Radio is fully accessible and screen-readable through the following features:

  1. The aria-invalid attribute is set to true when the input is invalid.
  2. The aria-describedby attribute is set to the id of the FieldMessage or ErrorMessage that describes the input.
  3. The aria-required attribute is set to true when the input is required.
  4. The aria-disabled attribute is set to true when the input is disabled.
  5. The aria-checked attribute is set to true when the input is checked.
  6. The aria-checked attribute is set to mixed when the input is indeterminate.
  7. The aria-hidden attribute is set to true on the input control and icon to hide it from screen readers.