The bulk selector gives individuals the ability to take complex actions on a group of items.
This component is deprecated! Please use the new Bulk Selector instead.
Old component won’t get updates unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
New component should always be used unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
If you are looking to migrate this component and require help, reach out to the #ask-design-system Slack channel.
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>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.
Insight
During testing, customers were able to more easily discover and use bulk selector in the dark style.<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>This should only be used against dark backgrounds.
Needs to have correct aria-label applied to alert user of its presence.