Radio buttons the proper (React) way.

This package is a re-take on react-radio-group by Cheng Lou, but written using TypeScript and the ”new” Context API introduced in React 16.3.0.

Installation

$ npm i react-radio-input

// or…

$ yarn add react-radio-input

Basic usage

import { useState } from 'react';
import { RadioGroup, Radio } from 'react-radio-input';

const ExampleComponent = () => {
  const initialValue = 'apple';
  const [selectedFruit, setSelectedFruit] = useState(initialValue);

  return (
    <RadioGroup
      name="favoriteFruit"
      onChange={setSelectedFruit}
      selectedValue={selectedFruit}
    >
      <label htmlFor="bananaOption">
        <Radio id="bananaOption" value="banana" />
        Bananas
      </label>
      <label htmlFor="appleOption">
        <Radio id="appleOption" value="apple" />
        Apples
      </label>
      <label htmlFor="orangeOption">
        <Radio id="orangeOption" value="orange" />
        Oranges
      </label>
    </RadioGroup>
  );
};

A few points worth mentioning:

• Repetitive fields are either lifted onto the RadioGroup wrapper or already implicitly set on the Radio components, which themselves are rendered as native HTML <input type="radio" /> elements.
• Because they are <input type="radio" />’s, there is no need for aria-* or role attributes to be added – the element itself provides the necessary semantic meaning for accessability features (remember the first rule of ARIA use).
• RadioGroup by default is rendered as a fieldset HTML element. See below for ways of changing this, but I would strongly advice to consider re-styling it instead – fieldset’s job is to group several controls as well as labels in a HTML form, which is prety much what we want to do here.
• As seen in the example, the consumer is left to provide the proper label, as seen fit. This has two consequences, by which the latter has been deemed more important than the former for this package:
  1. There’s a weee bit of work to be done for the consumer if they want an accessible solution (please do this though 🙏).
  2. The consumer has total control over how and where the label is attached to the form input.
• I recommend to wrap wrap these components with your own implementation (with proper label-handling) and then use that in your codebase.

With useRadioGroup

If you need to get access to the provided RadioGroup context in intermediate components between your RadioGroup and Radio components, react-radio-input also provides a useRadioGroup hook:

// CustomRadio
import { styled } from '@emotion/styled';
import { Radio, useRadioGroup } from 'react-radio-input';

const RadioWrapper = styled.label(({ isSelected }) => `
  background-color: ${isSelected ? '#5a5ae8' : '#dddde1'};
`);

const CustomRadio = ({ description, label, value }) => {
  const { selectedValue } = useRadioGroup();
  const isSelected = value === selectedValue;

  return (
    <RadioWrapper isSelected={isSelected}>
      <Radio value={value} />
      {label}
      {description}
    <RadioWrapper />
  );
};

// Parent
import { useState } from 'react';
import { RadioGroup } from 'react-radio-input';
import CustomRadio from './CustomRadio';

const ExampleComponent = () => {
  const [selectedTier, setSelectedTier] = useState();

  return (
    <RadioGroup name="productTier" onChange={setSelectedTier} selectedValue={selectedTier}>
      <legend>Select the size of your side project</legend>
      <CustomRadio label="Hobby" description="1GB – $5/month" value="hobby" />
      <CustomRadio
        label="Freelancer"
        description="5GB – $10/month"
        value="freelancer"
      />
      <CustomRadio
        label="Startup"
        description="10GB – $15/month"
        value="startup"
      />
    </RadioGroup>
  );
};

API

RadioGroup

| Prop | Type | Description | | :-------------- | :----------------------------------------: | :--------------------------------------------------------------------------------------------- | | children | React component | [React components] | | | component | String | React component | Defaults to fieldset – what HTML tag/React component to use for rendering the RadioGroup. | | disabled | Boolean | Disables all Radio’s inside the RadioGroup. | | name | String | Unique name for the current RadioGroup – will be implicitly set on each Radio. | | onChange | Function | Will be called with the selected value as argument whenever a radio is selected. | | selectedValue | String | Number | Boolean | The currently selected value. |

Apart from the above, any additional props to RadioGroup will be passed down to component.

Radio

| Prop | Type | Description | | :----------- | :--------------------------------: | :------------------------------- | | disabled | Boolean | Disables an individual Radio. | | value | String | Number | Boolean | Value of the Radio. |

Apart from the above, any additional props to Radio will be passed down to the underlying <input type="radio" /> element.