Radio

import { Radio, RadioGroup, RadioPrimitive } from '@elemental-ui-alpha/radio';

Usage

Basic usage of radio.

<Radio defaultChecked>Uncontrolled</Radio>

Disabled

<Stack gap="medium">
  <Radio disabled>Disabled</Radio>
  <Radio checked disabled>
    Checked + Disabled
  </Radio>
</Stack>

Invalid

<Radio invalid checked={false}>
  Invalid
</Radio>

Multiline Labels and Markup

<div style={{ width: 300 }}>
  <Radio>
    <>
      Radio buttons can include <strong>bold text</strong> and{' '}
      <a href="">anchors</a> which may wrap onto multiple lines.
    </>
  </Radio>
</div>

Radio Group

It's recommended to use the radio group component, which normalizes the onChange and value behaviour.

Most of the time you'll only want the updated value, this is simplified by passing it back rather than the event. The original event is still available as the second argument if needed.

The checkbox group uses Stack under-the-hood so you can distribute each item along the X or Y axis, using the direction prop:

• vertical (default)
• horizontal

const [value, setValue] = React.useState('1');
const onChange = (val, event) => {
  setValue(val);
  console.log(event);
};

return (
  <RadioGroup
    direction="vertical"
    legend="radio group"
    onChange={onChange}
    value={value}
  >
    <Radio value="1">First</Radio>
    <Radio value="2">Second</Radio>
    <Radio value="3">Third</Radio>
  </RadioGroup>
);

Radio Primitive

For custom radio behaviours use the RadioPrimitive. This component isn't already wrapped in a label, allowing full control of semantics and layout.

const [checked, setChecked] = React.useState([]);
const onChange = event => {
  const item = event.target.value;
  setChecked(item);
};

return (
  <Columns gap="small" collapse="large">
    {['First', 'Second', 'Third'].map(v => {
      const isChecked = checked === v;
      const bg = isChecked ? 'shade' : null;

      return (
        <Flex
          align="center"
          as="label"
          background={bg}
          direction="horizontal"
          padding="small"
          rounding="small"
        >
          <RadioPrimitive
            key={v}
            value={v}
            checked={isChecked}
            onChange={onChange}
          />
          <Text marginLeft="small">{v}</Text>
        </Flex>
      );
    })}
  </Columns>
);