import Radio, { RadioGroup } from '@invisionag/iris-react-radio';

react-radio is a component that enables a user to chose between multiple choices. the layouting of these choices depends on what component gets put into the radio group.

Usage

Basic

<RadioGroup name="basic-group">
  <Radio value="1">First Option</Radio>
  <Radio value="2">Second Option</Radio>
</RadioGroup>

Preselected value

<RadioGroup name="basic-group" selectedValue="1">
  <Radio value="1">First Option</Radio>
  <Radio value="2">Second Option</Radio>
</RadioGroup>

Card layout

Instead of the default radio button layout, you can use clickable cards to render your options. Cards children will be displayed in the body, while the optional header prop expects valid jsx that will be rendered as a heading. Cards behave just like the Radio elements and can be mixed with them.

import RadioCard from '@invisionag/iris-react-radio/Card';

<RadioGroup name="basic-group" selectedValue="1">
  <RadioCard value="1">First Option</RadioCard>
  <RadioCard value="2" header={<h1>Second</h1>}>Second Option</RadioCard>
  <RadioCard value="3">Third Option</RadioCard>
</RadioGroup>

OnChange handler

Radios can receive an onChange handler, which will get executed before the builtin handler.

<RadioGroup name="basic-group" selectedValue="1">
  <Radio value="1" onChange={() => console.log('radio button changes')}>First Option</Radio>
  <Radio value="2">Second Option</Radio>
</RadioGroup>

Note that input elements only fire their onChange event when a radio gets selected. If, because of that, another radio gets deselected, this one won't fire.