RadioGroup

import { Radio, RadioGroup } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState('one');

  return <RadioGroup
    label="Test radio group"
    value={value}
    onChange={(value) => {
      setValue(value);
    }}
  >
    <Radio value="one" label="One" />
    <Radio value="two" label="Two" />
    <Radio value="three" label="Three" />
  </RadioGroup>
}

import { Radio, RadioGroup } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState(null);

return <>
    <Box
      as="label"
      id="my_label_id"
      htmlFor="my_group"
    >
      Make a selection
    </Box>
    <RadioGroup
      id="my_input"
      ariaLabelledby="my_label_id"
      value={value}
      onChange={(value) => {
        setValue(value);
      }}
    >
      <Radio value="one" label="One" />
      <Radio value="two" label="Two" />
      <Radio value="three" label="Three" />
    </RadioGroup>
  </>
}

import { Radio, RadioGroup } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
  const [isDisabled, setIsDisabled] = useState(false);
  const [value, setValue] = useState('one');
  
  return <>
    <Box as="label" mb="200" display="block">
      <Checkbox
        label="Disable group"
        isChecked={isDisabled}
        onChange={(e) => {
          setIsDisabled(e.target.checked);
        }}
      />
    </Box>

    <RadioGroup
      label="Test radio group"
      isDisabled={isDisabled}
      value={value}
      onChange={(value) => {
        setValue(value);
      }}
    >
      <Radio value="one" label="One" isDisabled={false} />
      <Radio value="two" label="Two" isDisabled={false} />
      <Radio value="three" label="Three" isDisabled={true} />
    </RadioGroup>
  </>
}