Skip to main content

Boolean

Reference​

  • The Boolean component is provide a reusable and customizable boolean input field.
  • It represent a boolean value (true or false) in the form of a checkbox.

Props​

  • value: The current state of the checkbox (true for checked, false for unchecked).
  • onEdit: A callback function triggered when the checkbox value changes. It receives the event object as an argument.
  • isDisabled: Disables the checkbox when set to true, preventing user interaction.
  • width: The width of the checkbox.
  • height: The height of the checkbox.
  • style: Custom styles for the checkbox container.
  • checkedIconStyle: Custom styles for the checkbox icon when it is checked.
  • uncheckedIconStyle: Custom styles for the checkbox icon when it is unchecked.

Usage Example​

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { Boolean } = protrakComponents;
  const [isChecked, setIsChecked] = React.useState(false);

  const handleEdit = (event) => {
    setIsChecked(event.target.checked);
    console.log('Checkbox value:', event.target.checked);
  };

  return (
    <Boolean
      value={isChecked}
      onEdit={handleEdit}
      isDisabled={false}
      width="1rem"
      height="1rem"
      style={{ margin: '10px' }}
      checkedIconStyle={{ color: 'green' }}
      uncheckedIconStyle={{ color: 'red' }}
    />
  );
};

UI​

Boolean