RadioGroup

Combines several GroupedLabelledRadio components into a one visual input box.

const Example: React.FC = () => {
  const [value, setValue] = React.useState("long-answer");

  const handleChange = (event) => setValue(event.target.value);

  return (
    <RadioGroup>
      <GroupedLabelledRadio
        name="answer"
        label="I enjoy answering questions with a really long speach that nobody can follow what I am talking about 🤓"
        value="long-answer"
        checked={value === "long-answer"}
        onChange={handleChange}
      />
      <GroupedLabelledRadio
        name="answer"
        label="I just answer questions 🤷‍♂️"
        value="short-answer"
        checked={value === "short-answer"}
        onChange={handleChange}
      />
    </RadioGroup>
  );
};

Error state

When radio input is invalid simply set the invalid property to equal to true to the GroupedLabelledRadio and it will be visualised.

const ErrorExample: React.FC = () => {
  const [value, setValue] = React.useState("long-answer");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
    setValue(event.target.value);

  return (
    <RadioGroup>
      <GroupedLabelledRadio
        name="error-answer"
        label="I enjoy answering questions with a really long speach that nobody can follow what I am talking about 🤓"
        value="long-answer"
        checked={value === "long-answer"}
        invalid
        onChange={handleChange}
      />
      <GroupedLabelledRadio
        name="error-answer"
        label="I just answer questions 🤷‍♂️"
        value="short-answer"
        checked={value === "short-answer"}
        invalid
        onChange={handleChange}
      />
    </RadioGroup>
  );
};