design-system-react/

Radio

Usage

It is easier to use if you set a wrapper with the RadioGroup and provide options of type Option:

type Option = {
  label: string,
  value: string,
};
type RadioGroup = React.FunctionComponent<
  React.InputHTMLAttributes<HTMLInputElement> & {
    selected?: string,
    name: string,
    options: Option[],
  },
>;

export const radioGroupWithBox = () => {
  const [selected, setSelected] = useState < string > '';
  const options = [
    {
      label: 'Option one',
      value: 'Value one',
    },
    {
      label: 'Option two',
      value: 'Value two',
    },
    {
      label: 'Option three',
      value: 'Value three',
    },
  ];

  return (
    <Box display="flex">
      <RadioGroup
        selected={selected}
        options={options}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setSelected(e.target.value)
        }
        name="name"
      />
    </Box>
  );
};
copy