design-system-react/

Checkbox

Usage

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

export const checkboxGroupWithBox = () => {
  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>
      <CheckboxGroup
        selected={selected}
        options={options}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          if (selected.includes(e.target.value)) {
            setSelected(selected.filter(option => option !== e.target.value));
          } else {
            setSelected([...selected, e.target.value]);
          }
        }}
        name="name"
      />
    </Box>
  );
};
copy