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.

Quick Start

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>
)

API

<RadioGroup>

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

Props

| Prop | Type | Default | Required? | Description | | ------------ | ------------------------------------------------------------------------------------- | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | name | string | undefined | Yes | The name of the checkbox group (applied to each child <Radio> input) | | value | value: string | number | string[] | undefined | undefined | No | Makes the radio group a controlled component which can no longer be updated with the setValue control or any <Radio> controls. It should be the same as one of the values in the child <Radio> inputs. | | defaultValue | value: string | number | string[] | undefined | undefined | No | This sets the default radio group value. It should be the same as one of the values in the child <Radio> inputs. | | onChange | (value: string | number | string[] | undefined) => any | undefined | No | This callback fires each time the checked value changes | | children | React.ReactNode | undefined | No | Any React nodes, including your Radio inputs |

useRadioGroup()

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

RadioGroupContextValue

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
}

<Radio>

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.

Props

| Prop | Type | Default | Required? | Description | | -------- | --------------------------- | ----------- | --------- | ------------------------------------------------------------ | | disabled | boolean | false | No | Disables this radio option | | onChange | (checked: boolean) => any | undefined | No | Called each time the checked state of this option changes. | | children | React.ReactNode | undefined | No | Your custom styled radio. |

<Mark>

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>.

Props

| Prop | Type | Default | Required? | Description | | -------------- | --------------------- | ----------- | --------- | ----------------------------------------------------------------------------------- | | uncheckedClass | string | undefined | No | This class name will be applied to the child element when the radio is unchecked. | | checkedClass | string | undefined | No | This class name will be applied to the child element when the radio is checked. | | uncheckedStyle | React.CSSProperties | undefined | No | These styles will be applied to the child element when the radio is unchecked. | | checkedStyle | React.CSSProperties | undefined | No | These styles name will be applied to the child element when the radio is checked. | | children | React.ReactNode | undefined | Yes | The child you wish to render when the radio is checked. |

<Checked>

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

Props

| Prop | Type | Default | Required? | Description | | -------- | ----------------- | ----------- | --------- | ------------------------------------------------------- | | children | React.ReactNode | undefined | Yes | The child you wish to render when the radio is checked. |

<Unchecked>

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

Props

| Prop | Type | Default | Required? | Description | | -------- | ----------------- | ----------- | --------- | --------------------------------------------------------- | | children | React.ReactNode | undefined | Yes | The child you wish to render when the radio is unchecked. |

useRadio()

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

RadioContextValue

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
}

LICENSE

MIT