Skip to main content

CheckboxGroup

  • The CheckboxGroup component is a React component designed to render a group of checkboxes with labels. Component Overview
  • Renders a list of checkboxes based on the options prop.
  • Allows users to select or deselect checkboxes, updating the selected values via the onEdit callback.
  • It supports custom styles.

Props​

  • options (required): An array of objects representing the available checkbox options.
  • Each object in the array should have the following structure:
{
  name: 'optionName',       // Unique identifier for the option
  displayName: 'Option 1',  // Text to display as the label
  disabled: false           // Whether the checkbox is disabled
}
  • value (optional): An array of strings representing the currently selected checkbox values. Each string corresponds to the name property of an option.
  • onEdit (required): A callback function that is triggered whenever the selection changes. It receives the updated array of selected values as its argument.
  • labelStyle: An object containing custom styles for the labels of the checkboxes.
  • style: An object containing custom styles for the checkboxes themselves.
  • direction: A string that determines the layout direction of the checkboxes.
  • Possible values: 'row': Checkboxes are displayed horizontally. 'column': Checkboxes are displayed vertically.

Usage Example​

const { protrakComponents } = React.useContext(customWidgetContext);
const { CheckboxGroup } = protrakComponents;
const [selectedValues, setSelectedValues] = React.useState([]);

const options = [
  { name: 'option1', displayName: 'Option 1', disabled: false },
  { name: 'option2', displayName: 'Option 2', disabled: true },
  { name: 'option3', displayName: 'Option 3', disabled: false },
];

  const handleEdit = (updatedValues) => {
    setSelectedValues(updatedValues);
  };

  return (
    <CheckboxGroup
      options={options}
      value={selectedValues}
      onEdit={handleEdit}
      direction="column"
    />
  );

UI:​

CheckboxGroup