Radio

Radio buttons allow users to select a single option from a list of mutually exclusive options.

Install
npm install @pluralsight/ps-design-system-radio
Import
import Radio from '@pluralsight/ps-design-system-radio'

Examples

Uncontrolled

Uncontrolled with inital value set. Radio buttons present a group of options, of which only a single option can be selected at a time. The grouping is commonly defined by the name prop.

import React from 'react'
import Radio from '@pluralsight/ps-design-system-radio'

const Comp = () => (
  <Radio.Group name="courseLevel">
    <Radio.Button value="beginner" label="Beginner" />
    <Radio.Button value="intermediate" label="Intermediate" />
    <Radio.Button value="advanced" label="Advanced" />
  </Radio.Group>
)

export default Comp

Controlled

Controlled Radios require both value and handleChange callback

import React from 'react'
import Radio from '@pluralsight/ps-design-system-radio'
import Button from '@pluralsight/ps-design-system-button'
import { layout, type, colorsTextIcon, colorsBackgroundLight } from '@pluralsight/ps-design-system-core'

const Comp = () => {
  const [value, setValue] = React.useState('intermediate')

  function handleChange(evt, nextValue) {
    setValue(nextValue)
  }
  return (
    <div className="example-grid--col-2">
      <Radio.Group onChange={handleChange} value={value} name="controlled">
        <Radio.Button value="beginner" label="Beginner" />
        <Radio.Button value="intermediate" label="Intermediate" />
        <Radio.Button value="advanced" label="Advanced" />
      </Radio.Group>
      <div
        className="example-flex-column"
        style={{
          padding: layout.spacingLarge,
          fontSize: type.fontSize400,
          color: colorsTextIcon.lowOnLight,
          background: colorsBackgroundLight[2],
          borderRadius: 12
        }}
      >
        Selected: {value}
        <Button
          onClick={() => setValue('intermediate')}
          appearance={Button.appearances.secondary}
        >
          Set Intermediate
        </Button>
      </div>
    </div>
  )
}

export default Comp

Disabled

Disabled radio buttons are unmodifiable and diminished visually.

import React from 'react'
import Radio from '@pluralsight/ps-design-system-radio'

const Comp = () => (
  <Radio.Group disabled name="courseLevel">
    <Radio.Button value="beginner" label="Beginner" />
    <Radio.Button value="intermediate" label="Intermediate" />
    <Radio.Button value="advanced" label="Advanced" />
  </Radio.Group>
)

export default Comp

Error

Error states are engaged with the error flag.

import React from 'react'
import Radio from '@pluralsight/ps-design-system-radio'

const Comp = () => (
  <Radio.Group error name="courseLevel">
    <Radio.Button value="beginner" label="Beginner" />
    <Radio.Button value="intermediate" label="Intermediate" />
    <Radio.Button value="advanced" label="Advanced" />
  </Radio.Group>
)

export default Comp

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

WAI-ARIA Patterns: Radio Group

Props

Radio.Group

Name	Type	Description	Default
`disable`	`boolean`	standard input disable flag	`false`
`error`	`boolean`	error state flag	`false`
`label`	`string`	identifying string for group
`name`	`string`	form data identifier
`onChange`	`(Event, value: any) => void`	triggers on radio select
`subLabel`	`string`	supporting text or error messaging
`value`	`string \| number`	if Radio.Group is controlled current selected radio value else if uncontrolled initial selected value

Radio.Button

Name	Type	Description
`label`	`React.ReactNode`	display text
`onBlur`	`(Event) => void`	triggers on radio blur
`onClick`	`(Event, value: any) => void`	triggers on radio select
`onFocus`	`(Event) => void`	triggers on radio focus
`value`	`string \| number`	radio option value