@accessible/radio

---

<Radio>

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.

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 className="my-radio">
      <Radio value="pizza">
        <span className="my-radio">
          <Mark checkedClass="checked" uncheckedClass="unchecked">
            <span className="mark" />
          </Mark>
        </span>
      </Radio>
      Pizza
    </label>

    <label className="my-radio">
      <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 | React.ReactNode[] | JSX.Element[] | JSX.Element

<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
children	React.ReactNode | React.ReactNode[] | ((context: RadioContextValue) => React.ReactNode)	undefined	No	Your custom styled radio.

<Mark>

A convenient component for conditionally adding class names and styles when the component is checked/unchecked.

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	"radio--checked"	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.

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.

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

RadioContextValue

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

useChecked()

Returns true when the radio is checked, otherwise false

useFocused()

Returns true when the radio is focused, otherwise false

useControls()

This hook provides access to the checkbox's check and uncheck functions

Example

const Component = () => {
  const {check} = useControls()
  return <button onClick={check}>Check me</button>
}

LICENSE

MIT