Radio Group

Radio group is a container for radio inputs and is used where two or more radio inputs are required. A radio group can accomodate two styles of radio inputs — a radio icon or radio button.

GitHub·Storybook·Playroom·Figma

Installation

bash

npm install @nib-components/radio-group

As a form input, @nib-components/form-control must wrap this component to provide an accessible label, help text, and validation styling. Note: You will also need to install the peerDependencies @nib/icons and @nib-components/theme.

Usage

jsx

import RadioGroup from '@nib-components/radio-group';

Interactive demo

Radio icon style

jsx

() => {
  const [rating, setRating] = React.useState(null);
  return (
    <FormControl label="Rate us" id="stars" name="stars" valid={false} validated={false} error="Please provide a rating.">
      <RadioGroup
        onChange={e => setRating(e.target.value)}
        value={rating}
        options={{
          1: '1 star',
          2: '2 stars',
          3: '3 stars',
          4: '4 stars',
          5: '5 stars'
        }}
      />
    </FormControl>
  );
};

() => {
  const [rating, setRating] = React.useState(null);
  return (
    <FormControl label="Rate us" id="stars" name="stars" valid={false} validated={false} error="Please provide a rating.">
      <RadioGroup
        onChange={e => setRating(e.target.value)}
        value={rating}
        options={{
          1: '1 star',
          2: '2 stars',
          3: '3 stars',
          4: '4 stars',
          5: '5 stars'
        }}
      />
    </FormControl>
  );
};

Button style

jsx

() => {
  const [buttonRating, setButtonRating] = React.useState(null);
  return (
    <FormControl label="Rate us" id="stars2" name="stars2" valid={false} validated={false} error="Please provide a rating.">
      <RadioGroup
        onChange={e => setButtonRating(e.target.value)}
        value={buttonRating}
        options={{
          1: '1 star',
          2: '2 stars',
          3: '3 stars',
          4: '4 stars',
          5: '5 stars'
        }}
        component={RadioButton}
      />
    </FormControl>
  );
};

() => {
  const [buttonRating, setButtonRating] = React.useState(null);
  return (
    <FormControl label="Rate us" id="stars2" name="stars2" valid={false} validated={false} error="Please provide a rating.">
      <RadioGroup
        onChange={e => setButtonRating(e.target.value)}
        value={buttonRating}
        options={{
          1: '1 star',
          2: '2 stars',
          3: '3 stars',
          4: '4 stars',
          5: '5 stars'
        }}
        component={RadioButton}
      />
    </FormControl>
  );
};

With subtitles

jsx

() => {
  const [rating, setRating] = React.useState(null);
  return (
    <FormControl label="Rate us" id="stars3" name="stars3" valid={false} validated={false} error="Please provide a rating.">
      <RadioGroup
        onChange={e => setRating(e.target.value)}
        value={rating}
        options={{
          1: {
            label: '1 star',
            subtitle: 'Poor'
          },
          2: {
            label: '2 stars',
            subtitle: 'Okay'
          },
          3: {
            label: '3 stars',
            subtitle: 'Good'
          },
          4: {
            label: '4 stars',
            subtitle: 'Great'
          },
          5: {
            label: '5 stars',
            subtitle: 'Excellent'
          }
        }}
      />
    </FormControl>
  );
};

() => {
  const [rating, setRating] = React.useState(null);
  return (
    <FormControl label="Rate us" id="stars3" name="stars3" valid={false} validated={false} error="Please provide a rating.">
      <RadioGroup
        onChange={e => setRating(e.target.value)}
        value={rating}
        options={{
          1: {
            label: '1 star',
            subtitle: 'Poor'
          },
          2: {
            label: '2 stars',
            subtitle: 'Okay'
          },
          3: {
            label: '3 stars',
            subtitle: 'Good'
          },
          4: {
            label: '4 stars',
            subtitle: 'Great'
          },
          5: {
            label: '5 stars',
            subtitle: 'Excellent'
          }
        }}
      />
    </FormControl>
  );
};

Props

As the <RadioGroup/> is wrapped in a <FormControl/>, all FormControl props such as valid, validated, and disabled will be passed down to this component. This includes the id, name and label which will align with the for attribute on the <label>.

All props passed directly to <RadioGroup/> will be applied to the underlying <input> as attributes.

Prop	Type	Default	Description
`options` (required)	object		Two structures are supported. Both are an object, with keys mapping to the option value. The property value maps to either the checkbox label as string, or an object with `label` and `subtitle` keys.
`boldLabel`	boolean	`false`	Whether the labels are bold. If a subtitle is provided for an option, the default value changes to `true` for that option.
`value`	string or number		The selected value.
`component`	string or React component	`Radio`	The component used to render a radio.

Considerations

Radio inputs are used when there are a number of options available and the user may select only one option at any time. Selecting one radio input deselects the others.

Subtitles are optional and should be used to provide more context to the option. Subtitles should be added to all options in the group, or none. Otherwise, alignment will suffer, especially if rendering the options inline.

When a user is able to select multiple options at once use Checkbox.

Order radio options from most likely to least likely to be selected.

When there are 6 or more options consider using a Select.

Edit this page