npm i @accessible/radio

An accessible radio component for React. This library allows you to create your own a radio with your own styles while maintaining the ability to focus and update a radio input with the keyboard.

Check out the example on CodeSandbox

import {RadioGroup, Radio, Mark} from '@accessible/radio'

const MyRadio = () => (
  <RadioGroup name='favorite_food' defaultValue='pizza'>
    <h2>What is your favorite food?</h2>

    <label>
      <Radio value='pizza'>
        <span className='my-radio'>
          <Mark checkedClass='checked' uncheckedClass='unchecked'>
            <span className='mark' />
          </Mark>
        </span>
      </Radio>
      Pizza
    </label>

    <label>
      <Radio value='tacos'>
        <span className='my-radio'>
          <Mark checkedClass='checked' uncheckedClass='unchecked'>
            <span className='mark' />
          </Mark>
        </span>
      </Radio>
      Tacos
    </label>
  </RadioGroup>
)

Creates context that controls the child <Radio> components. This is also where you set controlled values and default values for the radio group.

A React hook that returns the RadioGroupContextValue for the nearest <RadioGroup> parent.

interface RadioGroupContextValue {
  name: string
  value: string | number | string[] | undefined
  setValue: (
    value:
      | string``
      | number
      | string[]
      | undefined
      | ((
          current: string | number | string[] | undefined
        ) => string | number | string[] | undefined)
  ) => void
}

Creates a visually hidden radio input that is focusable and accessible via keyboard navigation. All props passed to this component are applied to the <input>. This also creates a context provider enabling the other components in this library to access the radio's state deep in the tree.

A convenient component for conditionally adding class names and styles when the <Radio> component is checked/unchecked. It must be a child of a <Radio>.

The child of this component will only render when the <Radio> is in a checked state. It must be a child of a <Radio>.

The child of this component will only render when the <Radio> is in an unchecked state. It must be a child of a <Radio>.

A React hook that returns the RadioContextValue for the nearest <Radio> parent.

interface RadioContextValue {
  // Does the radio have a `checked` property?
  checked: boolean
  // Is the radio currently focused?
  focused: boolean
  // Is the radio currently disabled?
  disabled: boolean
  // Checks the radio
  check: () => void
  // Unchecks the radio
  uncheck: () => void
}

MIT