Bulk Selector

The bulk selector gives individuals the ability to take complex actions on a group of items.

Default

1 item selected

<tk-bulk-selector>
  <p class="mb-0x" slot="count">1 item selected</p>
  <tk-dropdown slot="actions" trigger-type="action" light position="top-right">
    <tk-dropdown-item>
      <button class="dropdown__link" type="button">
        Beauxbatons Academy
      </button>
    </tk-dropdown-item>
    <tk-dropdown-item>
      <button class="dropdown__link" type="button">
        Durmstrang Institute
      </button>
    </tk-dropdown-item>
    <tk-dropdown-item>
      <button class="dropdown__link" current="true" type="button">
        Hogwarts
      </button>
    </tk-dropdown-item>
  </tk-dropdown>
</tk-bulk-selector>

<tk-checkbox id="bulkToggler" label="Bulk Selector"></tk-checkbox>

<script>
  let shouldShowBulkSelector = true;

  const bulkSelector = document.getElementsByTagName('tk-bulk-selector');
  const selectedCount = document.querySelectorAll('p[slot="count"]');

  bulkToggler.addEventListener('check', (e) => toggleBulkSelector(e.target))
  bulkSelector[0].addEventListener('allSelected', (e) => updateCount(e.detail));

  const updateCount = (eventDetail) => {
    const selectedText = eventDetail ? '9k items selected' : '1 item selected';
    return selectedCount[0].innerText = selectedText;
  }

  const toggleBulkSelector = (element) => {
    bulkSelector[0].showBulkSelector(shouldShowBulkSelector);
    shouldShowBulkSelector = !shouldShowBulkSelector;
  };
</script>

Description

This is the default bulk selector style. The bulk selector always slides in from the bottom of the viewport and stays fixed to the bottom of the viewport. The Bulk Selector component has four areas for content: select all, body, count and actions. All areas are optional.

Select All

The select all checkbox will always appear as the first element in the row. It is rendered by default. To remove it, add show-select-all="false". To customize the text, you can set it via the prop select-all-text="your string".

Body

This is where any unnamed, slotted content goes. If possible, avoid adding too much text here.

Count

A slotted element (slot="count") for displaying the count. This element often listens to the allSelected event to update its count.

Actions

Actions should always be on the far right side. If using our tk-dropdown, the dropdown should have a position of top-right. To render an element in this slot, use slot="actions".

Light

<tk-bulk-selector light>
  <tk-dropdown slot="actions" trigger-type="action" position="top-right">
    <tk-dropdown-item>
      <button class="dropdown__link" type="button">
        Beauxbatons Academy
      </button>
    </tk-dropdown-item>
    <tk-dropdown-item>
      <button class="dropdown__link" type="button">
        Durmstrang Institute
      </button>
    </tk-dropdown-item>
    <tk-dropdown-item>
      <button class="dropdown__link" current="true" type="button">
        Hogwarts
      </button>
    </tk-dropdown-item>
  </tk-dropdown>
</tk-bulk-selector>

<tk-checkbox id="bulkToggler2" label="Bulk Selector"></tk-checkbox>

<script>
  let shouldShowBulkSelector2 = true;
  bulkToggler2.addEventListener('check', (e) => toggleBulkSelector2(e.target));

  const toggleBulkSelector2 = (element) => {
    bulkSelector[1].showBulkSelector(shouldShowBulkSelector2);
    shouldShowBulkSelector2 = !shouldShowBulkSelector2;
  };
</script>

Description

This should only be used against dark backgrounds.

Props

Property Default Description
light false Sets the UI to the light version.
selectAllText "Select all" Sets the text for the Select All checkbox.
showSelectAll true Displays the Select All checkbox.
visible false Sets the visibility of the component.

Events

Name Description
allSelected Emits whenever the Select All checkbox is checked or unchecked.

Methods

Name Arguments Description
deselectAll() - Unchecks the Select All checkbox.
selectAll() - Checks the Select All checkbox.
showBulkSelector() visibility: boolean Displays the bulk selector.

Do

  • Ensure actions are clear and legible
  • Ensure bulk selector is updating content based on actions

Don't

  • Use more than one style of bulk selector

Accessibility

  • Needs to have correct aria-label applied to alert user of its presence.