OptionsList

The OptionsList component shows a large number of checkboxes arranged in a grid.

() => {
  const options = [
    { id: '208730', name: 'Accomplishment' },
    { id: '608114', name: 'Appreciate' },
    { id: '927489', name: 'Celebrate Careers' },
    { id: '44689', name: 'Congratulations' },
    { id: '577147', name: 'Custom' },
    { id: '3748', name: 'Customer Service' },
    { id: '923026', name: 'Encouragement' },
    { id: '211281', name: 'Events' },
    { id: '889165', name: 'Great Work' },
    { id: '658239', name: 'Happy Birthday' },
    { id: '923025', name: 'Holiday Cheer' },
    { id: '579120', name: 'Innovation' },
    { id: '233760', name: 'Leadership' },
    { id: '610850', name: 'Miscellaneous' },
    { id: '48436', name: 'New' },
    { id: '3738', name: 'Safety' },
    { id: '577332', name: 'Retirement' },
    { id: '591350', name: 'Teamwork' },
    { id: '4292', name: 'Thank you' },
    { id: '395', name: 'Value' },
    { id: '1041908', name: 'Veterans' },
    { id: '3742', name: 'Volunteer' },
    { id: '36004', name: 'Welcome' },
    { id: '236063', name: 'Wellness' },
  ];

  const [selections, onSelectionChange] = React.useState({});

  const isSelected = (option) => selections[option.name];

  const onChange = ({ target: { checked, name } }) => {
    onSelectionChange((prev) => ({
      ...prev,
      [name]: checked,
    }));
  };

  const selectAll = () => {
    const newSelections = {};
    options.forEach((option) => {
      newSelections[option.name] = true;
    });
    onSelectionChange(newSelections);
  };

  const selectNone = () => {
    onSelectionChange({});
  };

  return (
    <OptionsList
      options={options}
      isSelected={isSelected}
      onSelectAll={selectAll}
      onSelectNone={selectNone}
      onChange={onChange}
    />
  );
};

Props

Prop	Type	Default	Description
options	T[]		Array of options
onChange	(e) => void		Callback fired when any checkbox is changed. Same onChange as a Checkbox
onSelectAll	(e) => void		Callback fired when Select All button is clicked. Button is hidden if either of these functions are missing
onSelectNone	(e) => void		Callback fired when Clear Selections button is clicked. Button is hidden if either of these functions are missing
isSelected	(option: T) => boolean		Function that determines if an option is selected or not
renderCheckbox	(option: T, isSelected: boolean, onChange) => ReactNode	(function that renders a CheckBox inside a FormControlLabel using the option.name as the label)	Callback fired when rendering each checkbox. Takes the option, the result of calling the isSelected prop with the option, and the onChange prop as parameters.
error	string		String to display in an error alert, if present
onErrorDismiss	() => void		Callback fired when error alert close button is clicked. Close button only appears if this is set.

Examples

OptionsList without select all/none buttons

() => {
  const options = [
    { id: '208730', name: 'Accomplishment' },
    { id: '608114', name: 'Appreciate' },
    { id: '927489', name: 'Celebrate Careers' },
    { id: '44689', name: 'Congratulations' },
    { id: '577147', name: 'Custom' },
    { id: '3748', name: 'Customer Service' },
    { id: '923026', name: 'Encouragement' },
    { id: '211281', name: 'Events' },
    { id: '889165', name: 'Great Work' },
    { id: '658239', name: 'Happy Birthday' },
    { id: '923025', name: 'Holiday Cheer' },
    { id: '579120', name: 'Innovation' },
    { id: '233760', name: 'Leadership' },
    { id: '610850', name: 'Miscellaneous' },
    { id: '48436', name: 'New' },
    { id: '3738', name: 'Safety' },
    { id: '577332', name: 'Retirement' },
    { id: '591350', name: 'Teamwork' },
    { id: '4292', name: 'Thank you' },
    { id: '395', name: 'Value' },
    { id: '1041908', name: 'Veterans' },
    { id: '3742', name: 'Volunteer' },
    { id: '36004', name: 'Welcome' },
    { id: '236063', name: 'Wellness' },
  ];

  const [selections, onSelectionChange] = React.useState({});

  const isSelected = (option) => selections[option.name];

  const onChange = ({ target: { checked, name } }) => {
    onSelectionChange((prev) => ({
      ...prev,
      [name]: checked,
    }));
  };

  return (
    <OptionsList
      options={options}
      isSelected={isSelected}
      onChange={onChange}
    />
  );
};

OptionsList with less than 10 options

() => {
  const options = [
    { id: '608114', name: 'Appreciate' },
    { id: '44689', name: 'Congratulations' },
    { id: '3748', name: 'Customer Service' },
    { id: '889165', name: 'Great Work' },
    { id: '658239', name: 'Happy Birthday' },
    { id: '579120', name: 'Innovation' },
    { id: '4292', name: 'Thank you' },
  ];

  const [selections, onSelectionChange] = React.useState({});

  const isSelected = (option) => selections[option.name];

  const onChange = ({ target: { checked, name } }) => {
    onSelectionChange((prev) => ({
      ...prev,
      [name]: checked,
    }));
  };

  const selectAll = () => {
    const newSelections = {};
    options.forEach((option) => {
      newSelections[option.name] = true;
    });
    onSelectionChange(newSelections);
  };

  const selectNone = () => {
    onSelectionChange({});
  };

  return (
    <OptionsList
      options={options}
      isSelected={isSelected}
      onChange={onChange}
      onSelectAll={selectAll}
      onSelectNone={selectNone}
    />
  );
};