Base

  • Colors
  • Icons
  • Logos
  • Shadows and Elevations
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Expandable image
  • Filters
  • Gallery card
  • Icon Button
  • Indicators
  • Lightbox image
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Segmented Controls
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toggle button
  • Typeahead

Form

  • Card Select
  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation
  • Tabs

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Toast
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message
  • Question card & Group Questions Container

Visualizations

  • Data Colors

Bulk Selector

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

This component is deprecated! Please use the new Button instead.

Default

1 item selected

Expand Copy
<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.

Insight

During testing, customers were able to more easily discover and use bulk selector in the dark style.

Light

Expand Copy
<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.

Usage

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.