CheckboxGroup

Combines several GroupedLabelledCheckbox components into a one visual input box.

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

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

  return (
    <CheckboxGroup>
      <GroupedLabelledCheckbox
        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}
      />
      <GroupedLabelledCheckbox
        name="answer"
        label="I just answer questions 🤷‍♂️"
        value="short-answer"
        checked={value === "short-answer"}
        onChange={handleChange}
      />
    </CheckboxGroup>
  );
};

Error state

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

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

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

  return (
    <CheckboxGroup>
      <GroupedLabelledCheckbox
        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}
      />
      <GroupedLabelledCheckbox
        name="error-answer"
        label="I just answer questions 🤷‍♂️"
        value="short-answer"
        checked={value === "short-answer"}
        invalid
        onChange={handleChange}
      />
    </CheckboxGroup>
  );
};