Bulk Selector

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

Default

This becomes visible when a class of visible is applied.

<input id="bulkSelectorDark" class="bulk-selector__checkbox" type="checkbox">
<label for="bulkSelectorDark">Show Dark Bulk Selector</label>

<div class="bulk-selector">
  <p>This becomes visible when a class of <code>visible</code> is applied.</p>
</div>

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.

Light

This becomes visible when a class of visible is applied.

<input id="bulkSelectorLight" class="bulk-selector__checkbox" type="checkbox">
<label for="bulkSelectorLight">Show Light Bulk Selector</label>

<div class="bulk-selector bulk-selector--light">
  <p>This becomes visible when a class of <code>visible</code> is applied.</p>
</div>

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.