Skip to main content


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


import { Radio } from '@pluralsight/react'


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


Basic Radio

Live Editor



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.

Example of using CSS Modules to customize the Radio.
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.



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.


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.



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


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.