CheckboxBox

Checkboxes allow the user to select one or more items from a collection.

Basic usage

Administrator

An admin can set up the account: invite new members, edit approval policies and team composition

const Demo = () => {
  const [isAdministrator, setAdministrator] = useState<boolean>(false);

  return (
    <CheckboxBox
      label="Administrator"
      description="An admin can set up the account: invite new members, edit approval policies and team composition"
      isChecked={isAdministrator}
      onChange={(e) => setAdministrator(e.target.checked)}
    />
  );
};

With an icon

Use the iconName prop to add an icon to the CheckboxBox.

const Demo = () => {
  const [isAdministrator, setAdministrator] = useState<boolean>(false);

  return (
    <CheckboxBox
      label="Administrator"
      description="An admin can set up the account: invite new members, edit approval policies and team composition"
      iconName="person"
      isChecked={isAdministrator}
      onChange={(e) => setAdministrator(e.target.checked)}
    />
  );
};

Without the description

The description prop is optional.

Administrator

const Demo = () => {
  const [isAdministrator, setAdministrator] = useState<boolean>(false);

  return (
    <CheckboxBox
      label="Administrator"
      isChecked={isAdministrator}
      onChange={(e) => setAdministrator(e.target.checked)}
    />
  );
};

Indeterminate state

Use isIndeterminate to set the checkbox into an indeterminate state.

const Demo = () => {
  const [isAdministrator, setAdministrator] = useState<boolean>(false);

  return (
    <CheckboxBox
      label="Administrator"
      isIndeterminate={true} 
      isChecked={isAdministrator}
      onChange={(e) => setAdministrator(e.target.checked)}
    />
  );
};