Amara styleguide

Selection group

Selection groups are used to separate selection checkboxes into different groups. Use them when you have multiple, distinct, lists of items with selection checkboxes.

Put each group of checkboxes into a separate container with the class selectionGroup. This will do a few things:

  • Each group of checkboxes will be mutually exclusive, if you check a checkbox in 1 group, all checkboxes in other groups will get unchecked
  • By default, a checkAll element will only check the checkboxes in the same selectionGroup

By default the selectionGroup code will assume all checkboxes have the name "selection" use data-input-name to override this.

Selection Group 1

 Checkall
Video 1
Video 2

Selection Group 2

 Checkall
Video 3
Video 4
Video 5

Selection Group 3

 Checkall
Video 6
Video 7