American Express American Express |

Filters

Purpose

Filters allow users to dynamically filter data and/or content. Through filtering, users can reduce the amount of information being displayed.

Please note that the filters component is available in the DLS with limited functionality.

Filter Icon

Usage

Clicking the filter icon opens the filter menu, where users can access available options. The icon should be positioned in context to the content that is being filtered.

The filter icon uses Badges to show when filters are applied and reflects the total number of options selected.

Single Filter

Usage

Single filters allow users to filter on one filter category.

Single Select (Single Filter)

A single-select filter allows users to select only one option for a single filter category. Selecting a single option closes the menu and applies the filter to the content. Selecting ‘Reset’ updates the option to ‘All’, removes the applied filter and closes the menu. Selecting the close icon in the filter menu closes the menu.

Example - Single Select - Single Filter

Copy
<div class="filter-container" data-toggle="filter" data-filter="single" data-select="single">
  <div class="filter-button">
    <div class="badge badge-icon-default" aria-label="Filters applied" data-badge>1</div>
    <button
      id="single-single-filter"
      class="dls-bright-blue"
      aria-haspopup="listbox"
      aria-label="Filter data"
      aria-expanded="false"
      data-show
    >
      <i data-dls-icon="filter" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Filter icon"></i>
    </button>
  </div>
  <div class="filter border hidden shadow-1" aria-labelledby="single-single-filter">
    <div class="flex flex-align-center dls-bright-blue-bg dls-white filter-header">
      <button
        class="focus-light margin-r"
        aria-label="Close"
        data-close
      >
        <i data-dls-icon="close" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Close icon"></i>
      </button>
      <h2 class="flex-item-grow label-2 dls-white" id="filter1">Filter by: Country</h2>
      <button class="focus-light" data-reset>Reset</button>
    </div>
    <ul class="filter-menu" role="listbox" aria-labelledby="filter1">
      <li id="all" role="option" aria-selected="true" tabindex="0" class="filter-item" data-all>
        <span class="pad-responsive-lr">All</span>
      </li>
      <li id="ARS" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Argentina</span>
      </li>
      <li id="AUD" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Australia</span>
      </li>
      <li id="BRL" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Brazil</span>
      </li>
      <li id="CAD" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Canada</span>
      </li>
      <li id="DKK" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Denmark</span>
      </li>
      <li id="FI" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Finland</span>
      </li>
      <li id="FR" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">France</span>
      </li>
      <li id="DE" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Germany</span>
      </li>
      <li id="HK" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Hong Kong</span>
      </li>
      <li id="ID" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Indonesia</span>
      </li>
      <li id="INR" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">India</span>
      </li>
      <li id="IT" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Italy</span>
      </li>
      <li id="JP" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Japan</span>
      </li>
      <li id="MX" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Mexico</span>
      </li>
      <li id="NL" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Netherlands</span>
      </li>
      <li id="NZ" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">New Zealand</span>
      </li>
      <li id="NO" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Norway</span>
      </li>
      <li id="SG" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Singapore</span>
      </li>
      <li id="ES" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Spain</span>
      </li>
      <li id="SE" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Sweden</span>
      </li>
      <li id="CH" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Switzerland</span>
      </li>
      <li id="TW" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Taiwan</span>
      </li>
      <li id="TH" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">Thailand</span>
      </li>
      <li id="GB" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">United Kingdom</span>
      </li>
      <li id="US" role="option" tabindex="-1" class="filter-item">
        <span class="pad-responsive-lr ">United States</span>
      </li>
    </ul>
  </div>
</div>
<div class="scroll-x">
  <table class="table">
    <thead>
      <tr>
        <th>Company Name</th>
        <th>Customer Id</th>
        <th>Country</th>
        <th class="text-align-right">Date</th>
        <th class="text-align-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Charlie Mendez</td>
        <td>567324908234</td>
        <td>Canada</td>
        <td class="text-align-right">Aug 19</td>
        <td class="text-align-right">$800.76</td>
      </tr>
      <tr>
        <td>Patty's Bakery</td>
        <td>567324901231</td>
        <td>Australia</td>
        <td class="text-align-right">Oct 18</td>
        <td class="text-align-right">$1,240.00</td>
      </tr>
    </tbody>
  </table>
</div>

Multi Select (Single Filter)

Usage

A multi select filter allows users to select several options for a single filter category. Multi select filters incorporates the checkbox component to allow users to select as many options as needed. By default, all options are selected, as is the ‘Select All’ checkbox. Selecting the ‘Select All’ checkbox toggles between all options being selected/deselected. To filter results, users must validate their selection with the ‘Apply’ button. Selecting ‘Apply’ closes the menu and applies the selected filters to the content. Selecting ‘Reset’ removes the applied filter and resets the checkboxes to the default state. Selecting the close icon in the filter menu closes the menu without applying/saving any selections made.

Example - Multi Select - Single Filter

Copy
<div class="filter-container" data-toggle="filter" data-filter="single" data-select="single">
  <div class="filter-button">
    <div class="badge badge-icon-default" aria-label="Filters applied" data-badge></div>
    <button
      id="single-multi-filter"
      class="dls-bright-blue"
      aria-haspopup="listbox"
      aria-label="Filter by: Country"
      aria-expanded="false"
      data-show
    >
      <i data-dls-icon="filter" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Filter icon"></i>
    </button>
  </div>
  <div class="filter border shadow-1" aria-labelledby="single-multi-filter">
    <div id="filter2" class="flex flex-align-center dls-bright-blue-bg dls-white filter-header">
      <button
        class="focus-light margin-r"
        aria-label="Close"
        data-close
      >
        <i data-dls-icon="close" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Close icon"></i>
      </button>
      <h2 class="flex-item-grow label-2 dls-white" id="filterLabel2">Filter by: Country</h2>
      <button class="focus-light" data-reset>Reset</button>
    </div>
    <div class="filter-menu" aria-labelledby="filter2" data-toggle="checkboxgroup">
      <ul role="listbox" aria-labelledby="filterLabel2">
        <li role="option">
          <div class="filter-item pad-responsive-lr">
            <div class="checkbox">
              <input id="check-all" type="checkbox" data-indeterminate checked />
              <label for="check-all">Select All</label>
            </div>
          </div>
          <ul class="filter-checklist">
            <li id="ARS" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-ARS" type="checkbox"/>
                <label for="check-ARS">Argentina</label>
              </div>
            </li>
            <li id="AUD" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-AUD" type="checkbox"/>
                <label for="check-AUD">Australia</label>
              </div>
            </li>
            <li id="BRL" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-BRL" type="checkbox"/>
                <label for="check-BRL">Brazil</label>
              </div>
            </li>
            <li id="CAD" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-CAD" type="checkbox"/>
                <label for="check-CAD">Canada</label>
              </div>
            </li>
            <li id="DKK" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-DKK" type="checkbox"/>
                <label for="check-DKK">Denmark</label>
              </div>
            </li>
            <li id="FI" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-FI" type="checkbox"/>
                <label for="check-FI">Finland</label>
              </div>
            </li>
            <li id="FR" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-FR" type="checkbox"/>
                <label for="check-FR">France</label>
              </div>
            </li>
            <li id="DE" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-DE" type="checkbox"/>
                <label for="check-DE">Germany</label>
              </div>
            </li>
            <li id="HK" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-HK" type="checkbox"/>
                <label for="check-HK">Hong Kong</label>
              </div>
            </li>
            <li id="ID" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-ID" type="checkbox"/>
                <label for="check-ID">Indonesia</label>
              </div>
            </li>
            <li id="INR" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-INR" type="checkbox"/>
                <label for="check-INR">India</label>
              </div>
            </li>
            <li id="IT" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-IT" type="checkbox"/>
                <label for="check-IT">Italy</label>
              </div>
            </li>
            <li id="JP" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-JP" type="checkbox"/>
                <label for="check-JP">Japan</label>
              </div>
            </li>
            <li id="MX" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-MX" type="checkbox"/>
                <label for="check-MX">Mexico</label>
              </div>
            </li>
            <li id="NL" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-NL" type="checkbox"/>
                <label for="check-NL">Netherlands</label>
              </div>
            </li>
            <li id="NZ" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-NZ" type="checkbox"/>
                <label for="check-NZ">New Zealand</label>
              </div>
            </li>
            <li id="NO" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-NO" type="checkbox"/>
                <label for="check-NO">Norway</label>
              </div>
            </li>
            <li id="SG" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-SG" type="checkbox"/>
                <label for="check-SG">Singapore</label>
              </div>
            </li>
            <li id="ES" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-ES" type="checkbox"/>
                <label for="check-ES">Spain</label>
              </div>
            </li>
            <li id="SE" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-SE" type="checkbox"/>
                <label for="check-SE">Sweden</label>
              </div>
            </li>
            <li id="CH" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-CH" type="checkbox"/>
                <label for="check-CH">Switzerland</label>
              </div>
            </li>
            <li id="TW" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-TW" type="checkbox"/>
                <label for="check-TW">Taiwan</label>
              </div>
            </li>
            <li id="TH" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-TH" type="checkbox"/>
                <label for="check-TH">Thailand</label>
              </div>
            </li>
            <li id="GB" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-GB" type="checkbox"/>
                <label for="check-GB">United Kingdom</label>
              </div>
            </li>
            <li id="US" class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="check-US" type="checkbox"/>
                <label for="check-US">United States</label>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="border-t pad">
      <button class="btn-sm-wrapper" data-apply>
        <span class="btn btn-sm btn-primary fluid">Apply</span>
      </button>
    </div>
  </div>
</div>
<div class="scroll-x">
  <table class="table">
    <thead>
      <tr>
        <th>Company Name</th>
        <th>Customer Id</th>
        <th>Country</th>
        <th class="text-align-right">Date</th>
        <th class="text-align-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Charlie Mendez</td>
        <td>567324908234</td>
        <td>Canada</td>
        <td class="text-align-right">Aug 19</td>
        <td class="text-align-right">$800.76</td>
      </tr>
      <tr>
        <td>Patty's Bakery</td>
        <td>567324901231</td>
        <td>Australia</td>
        <td class="text-align-right">Oct 18</td>
        <td class="text-align-right">$1,240.00</td>
      </tr>
    </tbody>
  </table>
</div>

Multiple Filters

Usage

Multiple filters allow users to filter on several filter category at once. Opening the filters menu displays a top level list of all available filter categories along with details on the selection for each category. For single select, the top level displays the selected option. For multi select, the top level displays the count of selected options.

Example - Multiple Filters - Single Select

Copy
<div class="filter-container" data-toggle="filter" data-filter="multi" data-select="single" data-all-text="All">
  <div class="filter-button">
    <div class="badge badge-icon-default" aria-label="Filters applied" data-badge></div>
    <button
      class="dls-bright-blue"
      id="multi-single-filter"
      aria-haspopup="true"
      aria-label="Filter"
      aria-expanded="false"
      data-show
    >
      <i data-dls-icon="filter" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Filter icon"></i>
    </button>
  </div>
  <div class="filter border shadow-1" aria-describedby="multi-single-filter">
    <div id="filter3" class="flex flex-align-center dls-bright-blue-bg dls-white filter-header">
      <button
        class="focus-light margin-r"
        aria-label="Close"
        data-close
      >
        <i data-dls-icon="close" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Close icon"></i>
      </button>
      <button
        class="focus-light margin-r hidden"
        aria-label="Back"
        data-back
      >
        <i data-dls-icon="left" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Back icon"></i>
      </button>
      <h2 class="flex-item-grow label-2 dls-white" id="filterLabel3">
        <span>Filter by: </span>
        <span data-filterby></span>
      </h2>
      <button class="focus-light" data-reset>Reset</button>
    </div>
    <div class="filter-menu">
      <!-- top level filter -->
      <div data-filters>
        <ul>
          <li class="pad-responsive-lr filter-item">
            <button
              id="filter-company"
              class="fluid flex flex-align-center"
              data-category="Company"
              >
              <span class="flex-item-grow text-align-left">
                <span class="sr-only">Filter by</span>Company Name</span>
              <span class="dls-gray-05 pad-1-r" data-count>All</span>
              <i class="dls-gray-05" data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
            </button>
          </li>
          <li class="pad-responsive-lr filter-item">
            <button
              id="filter-country"
              class="fluid flex flex-align-center"
              data-category="Country"
            >
              <span class="flex-item-grow text-align-left">
                <span class="sr-only">Filter by</span>Country</span>
              <span class="dls-gray-05 pad-1-r" data-count>All</span>
              <i class="dls-gray-05" data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
            </button>
          </li>
          <li class="pad-responsive-lr filter-item">
            <button
              id="filter-amount"
              class="fluid flex flex-align-center"
              data-category="Amount"
            >
              <span class="flex-item-grow text-align-left">
                <span class="sr-only">Filter by</span>Amount</span>
              <span class="dls-gray-05 pad-1-r" data-count>All</span>
              <i class="dls-gray-05" data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
            </button>
          </li>
        </ul>
      </div>
      <!-- company filter -->
      <ul class="sub-filter filter-hide" role="listbox" aria-labelledby="filter-company">
        <li id="multi-company" role="option" aria-selected="true" class="filter-item" tabindex="0" data-all>
          <span class="pad-responsive-lr fluid text-align-left">All</span>
        </li>
        <li id="multi-charlie" role="option" class="filter-item" tabindex="-1">
          <span class="fluid pad-responsive-lr text-align-left">Charlie Mendez</span>
        </li>
        <li id="multi-patty" role="option" class="filter-item" tabindex="-1">
          <span class="fluid pad-responsive-lr text-align-left">Patty's Bakery</span>
        </li>
      </ul>
      <!-- country filter -->
      <ul class="sub-filter filter-hide" role="listbox" aria-labelledby="filter-country">
        <li id="multi-country" role="option" aria-selected="true" class="filter-item" tabindex="0" data-all>
          <span class="pad-responsive-lr fluid text-align-left">All</span>
        </li>
        <li id="multi-ARS" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Argentina</span>
        </li>
        <li id="multi-AUD" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Australia</span>
        </li>
        <li id="multi-BRL" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Brazil</span>
        </li>
        <li id="multi-CAD" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Canada</span>
        </li>
        <li id="multi-DKK" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Denmark</span>
        </li>
        <li id="multi-FI" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Finland</span>
        </li>
        <li id="multi-FR" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">France</span>
        </li>
        <li id="multi-DE" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Germany</span>
        </li>
        <li id="multi-HK" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Hong Kong</span>
        </li>
        <li id="multi-ID" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Indonesia</span>
        </li>
        <li id="multi-INR" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">India</span>
        </li>
        <li id="multi-IT" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Italy</span>
        </li>
        <li id="multi-JP" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Japan</span>
        </li>
        <li id="multi-MX" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Mexico</span>
        </li>
        <li id="multi-NL" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Netherlands</span>
        </li>
        <li id="multi-NZ" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">New Zealand</span>
        </li>
        <li id="multi-NO" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Norway</span>
        </li>
        <li id="multi-SG" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Singapore</span>
        </li>
        <li id="multi-ES" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Spain</span>
        </li>
        <li id="multi-SE" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Sweden</span>
        </li>
        <li id="multi-CH" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Switzerland</span>
        </li>
        <li id="multi-TW" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Taiwan</span>
        </li>
        <li id="multi-TH" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">Thailand</span>
        </li>
        <li id="multi-GB" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">United Kingdom</span>
        </li>
        <li id="multi-US" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">United States</span>
        </li>
      </ul>
      <!-- amount filter -->
      <ul class="sub-filter filter-hide" role="listbox" aria-labelledby="filter-amount">
        <li id="multi-amount" role="option" aria-selected="true" class="filter-item" tabindex="0" data-all>
          <span class="pad-responsive-lr">All</span>
        </li>
        <li id="multi-800" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">$800.76</span>
        </li>
        <li id="multi-1200" role="option" class="filter-item" tabindex="-1">
          <span class="pad-responsive-lr">$1,240.00</span>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="scroll-x">
  <table class="table">
    <thead>
      <tr>
        <th>Company Name</th>
        <th>Customer Id</th>
        <th>Country</th>
        <th class="text-align-right">Date</th>
        <th class="text-align-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Charlie Mendez</td>
        <td>567324908234</td>
        <td>Canada</td>
        <td class="text-align-right">Aug 19</td>
        <td class="text-align-right">$800.76</td>
      </tr>
      <tr>
        <td>Patty's Bakery</td>
        <td>567324901231</td>
        <td>Australia</td>
        <td class="text-align-right">Oct 18</td>
        <td class="text-align-right">$1,240.00</td>
      </tr>
    </tbody>
  </table>
</div>

Example - Multiple Filters - Multi Select

Copy
<div class="filter-container" data-toggle="filter" data-filter="multi" data-select="multi" data-all-text="All">
  <div class="filter-button">
    <div class="badge badge-icon-default" aria-label="Filters applied" data-badge></div>
    <button
      class="dls-bright-blue"
      id="multi-multi-filter"
      aria-haspopup="listbox"
      aria-label="set Filter"
      aria-expanded="false"
      data-show
    >
      <i data-dls-icon="filter" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Filter icon"></i>
    </button>
  </div>
  <div class="filter border shadow-1" aria-describedby="multi-multi-filter">
    <div id="filter4" class="flex flex-align-center dls-bright-blue-bg dls-white filter-header">
      <button
        class="focus-light margin-r"
        aria-label="Close"
        data-close
      >
        <i data-dls-icon="close" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Close icon"></i>
      </button>
      <button
        class="focus-light margin-r hidden"
        aria-label="Back"
        data-back
      >
        <i data-dls-icon="left" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Back icon"></i>
      </button>
      <h2 class="flex-item-grow label-2 dls-white">
        <span>Filter by: </span>
        <span data-filterby></span>
      </h2>
      <button class="focus-light" data-reset>Reset</button>
    </div>
    <div class="filter-menu">
    <!-- top level filter -->
    <div data-filters>
      <ul>
        <li class="pad-responsive-lr filter-item">
          <button
            id="multi-filter-company"
            class="fluid flex flex-align-center"
            data-category="Company"
            >
            <span class="flex-item-grow text-align-left">Company Name</span>
            <span class="dls-gray-05 pad-1-r" data-count>All</span>
            <i class="dls-gray-05" data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
          </button>
        </li>
        <li class="pad-responsive-lr filter-item">
          <button
            id="multi-filter-country"
            class="fluid flex flex-align-center"
            data-category="Country"
          >
            <span class="flex-item-grow text-align-left">Country</span>
            <span class="dls-gray-05 pad-1-r" data-count>All</span>
            <i class="dls-gray-05" data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
          </button>
        </li>
        <li class="pad-responsive-lr filter-item">
          <button
            id="multi-filter-amount"
            class="fluid flex flex-align-center"
            data-category="Amount"
          >
            <span class="flex-item-grow text-align-left">Amount</span>
            <span class="dls-gray-05 pad-1-r" data-count>All</span>
            <i class="dls-gray-05" data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
          </button>
        </li>
      </ul>
    </div>
    <!-- company filter -->
    <div class="sub-filter filter-hide" aria-labelledby="multi-filter-company" data-toggle="checkboxgroup">
      <ul role="listbox">
        <li role="option">
          <div class="filter-item pad-responsive-lr">
            <div class="checkbox">
              <input id="multi-check-company" type="checkbox" data-indeterminate checked/>
              <label for="multi-check-company">Select All</label>
            </div>
          </div>
          <ul class="filter-checklist">
            <li class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="multi-check-charlie" type="checkbox"/>
                <label for="multi-check-charlie">Charlie Mendez</label>
              </div>
            </li>
            <li class="pad-responsive-lr filter-item" role="option">
              <div class="checkbox">
                <input id="multi-check-patty" type="checkbox"/>
                <label for="multi-check-patty">Patty's Bakery</label>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- country filter -->
    <div class="sub-filter filter-hide" aria-labelledby="multi-filter-country" data-toggle="checkboxgroup">
      <ul role="listbox">
        <li role="option">
          <div class="filter-item pad-responsive-lr">
            <div class="checkbox">
              <input id="multi-check-country" type="checkbox" data-indeterminate checked/>
              <label for="multi-check-country">Select All</label>
            </div>
          </div>
        </li>
        <ul class="filter-checklist">
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-ARS" type="checkbox"/>
              <label for="multi-check-ARS">Argentina</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-AUD" type="checkbox"/>
              <label for="multi-check-AUD">Australia</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-BRL" type="checkbox"/>
              <label for="multi-check-BRL">Brazil</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-CAD" type="checkbox"/>
              <label for="multi-check-CAD">Canada</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-DKK" type="checkbox"/>
              <label for="multi-check-DKK">Denmark</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-FI" type="checkbox"/>
              <label for="multi-check-FI">Finland</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-FR" type="checkbox"/>
              <label for="multi-check-FR">France</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-DE" type="checkbox"/>
              <label for="multi-check-DE">Germany</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-HK" type="checkbox"/>
              <label for="multi-check-HK">Hong Kong</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-ID" type="checkbox"/>
              <label for="multi-check-ID">Indonesia</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-INR" type="checkbox"/>
              <label for="multi-check-INR">India</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-IT" type="checkbox"/>
              <label for="multi-check-IT">Italy</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-JP" type="checkbox"/>
              <label for="multi-check-JP">Japan</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-MX" type="checkbox"/>
              <label for="multi-check-MX">Mexico</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-NL" type="checkbox"/>
              <label for="multi-check-NL">Netherlands</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-NZ" type="checkbox"/>
              <label for="multi-check-NZ">New Zealand</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-NO" type="checkbox"/>
              <label for="multi-check-NO">Norway</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-SG" type="checkbox"/>
              <label for="multi-check-SG">Singapore</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-ES" type="checkbox"/>
              <label for="multi-check-ES">Spain</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-SE" type="checkbox"/>
              <label for="multi-check-SE">Sweden</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-CH" type="checkbox"/>
              <label for="multi-check-CH">Switzerland</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-TW" type="checkbox"/>
              <label for="multi-check-TW">Taiwan</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-TH" type="checkbox"/>
              <label for="multi-check-TH">Thailand</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-GB" type="checkbox"/>
              <label for="multi-check-GB">United Kingdom</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-US" type="checkbox"/>
              <label for="multi-check-US">United States</label>
            </div>
          </li>
        </ul>
      </ul>
    </div>
    <!-- company filter -->
    <div class="sub-filter filter-hide" aria-labelledby="multi-filter-amount" data-toggle="checkboxgroup">
      <ul role="listbox">
        <li role="option">
          <div class="filter-item pad-responsive-lr">
            <div class="checkbox">
              <input id="multi-check-amount" type="checkbox" data-indeterminate checked/>
              <label for="multi-check-amount">Select All</label>
            </div>
          </div>
        </li>
        <ul class="filter-checklist">
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-800" type="checkbox"/>
              <label for="multi-check-800">$800.76</label>
            </div>
          </li>
          <li class="pad-responsive-lr filter-item" role="option">
            <div class="checkbox">
              <input id="multi-check-1200" type="checkbox"/>
              <label for="multi-check-1200">$1,240.00</label>
            </div>
          </li>
        </ul>
      </ul>
    </div>
  </div>
  <!-- apply button -->
  <div class="border-t pad">
    <button class="btn-sm-wrapper" data-apply><span class="btn btn-sm btn-primary fluid">Apply</span></button>
  </div>
</div>
</div>
<div class="scroll-x">
  <table class="table">
    <thead>
      <tr>
        <th>Company Name</th>
        <th>Customer Id</th>
        <th>Country</th>
        <th class="text-align-right">Date</th>
        <th class="text-align-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Charlie Mendez</td>
        <td>567324908234</td>
        <td>Canada</td>
        <td class="text-align-right">Aug 19</td>
        <td class="text-align-right">$800.76</td>
      </tr>
      <tr>
        <td>Patty's Bakery</td>
        <td>567324901231</td>
        <td>Australia</td>
        <td class="text-align-right">Oct 18</td>
        <td class="text-align-right">$1,240.00</td>
      </tr>
    </tbody>
  </table>
</div>

Example - Persistent Filter

Copy
<div>
  <div class="display-inline-block-md-up margin-r-md-up">
    <div class="filter-container" data-toggle="filter" data-filter="multi" data-select="multi" data-all-text="All" data-persistent="md">
      <div class="filter-button hidden-md-up">
        <div class="badge badge-icon-default" aria-label="Filters applied" data-badge></div>
        <button
          id="persistent-filter"
          class="dls-bright-blue"
          aria-haspopup="true"
          aria-label="persistent Filter"
          aria-expanded="false"
          data-show
        >
          <i data-dls-icon="filter" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Filter icon"></i>
        </button>
      </div>
      <div class="filter border shadow-1 position-static-md-up">
        <div class="flex flex-align-center dls-bright-blue-bg dls-white filter-header">
          <button
            class="hidden-md-up focus-light margin-r"
            aria-label="Close"
            data-close
          >
            <i data-dls-icon="close" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Close icon"></i>
          </button>
          <button
            class="focus-light margin-r hidden"
            aria-label="Back"
            data-back
          >
            <i data-dls-icon="left" data-dls-icon-variant="outline" data-dls-icon-size="md" title="Back icon"></i>
          </button>
          <h2 class="flex-item-grow label-2 dls-white">
            <span>Filter by: </span>
            <span data-filterby></span>
          </h2>
          <button class="focus-light" data-reset>Reset</button>
        </div>
        <div class="filter-menu">
        <!-- top level filter -->
          <div data-filters>
            <ul>
              <li class="pad-responsive-lr filter-item">
                <button
                  id="static-filter-company"
                  class="fluid flex flex-align-center"
                  aria-haspopup="listbox"
                  aria-expanded="false"
                  data-category="Company"
                  >
                  <span class="flex-item-grow text-align-left">Company Name</span>
                  <span class="dls-gray-05 pad-1-r" data-count>All</span>
                  <i class="dls-gray-05" data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
                </button>
              </li>
              <li class="pad-responsive-lr filter-item">
                <button
                  id="static-filter-country"
                  class="fluid flex flex-align-center"
                  aria-haspopup="listbox"
                  aria-expanded="false"
                  data-category="Country"
                >
                  <span class="flex-item-grow text-align-left">Country</span>
                  <span class="dls-gray-05 pad-1-r" data-count>All</span>
                  <i class="dls-gray-05" data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
                </button>
              </li>
              <li class="pad-responsive-lr filter-item">
                <button
                  id="static-filter-amount"
                  class="fluid flex flex-align-center"
                  aria-haspopup="listbox"
                  aria-expanded="false"
                  data-category="Amount"
                >
                  <span class="flex-item-grow text-align-left">Amount</span>
                  <span class="dls-gray-05 pad-1-r" data-count>All</span>
                  <i class="dls-gray-05" data-dls-glyph="right" data-dls-glyph-size="lg" data-dls-icon-role="decorative"></i>
                </button>
              </li>
            </ul>
          </div>
          <!-- company filter -->
          <div class="sub-filter filter-hide" aria-labelledby="static-filter-company" data-toggle="checkboxgroup">
            <ul role="listbox">
              <li role="option">
                <div class="filter-item pad-responsive-lr">
                  <div class="checkbox">
                    <input id="static-check-company" type="checkbox" data-indeterminate checked/>
                    <label for="static-check-company">Select All</label>
                  </div>
                </div>
                <ul class="filter-checklist">
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-mendez" type="checkbox"/>
                      <label for="static-check-mendez">Charlie Mendez</label>
                    </div>
                  </li>
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-patty" type="checkbox"/>
                      <label for="static-check-patty">Patty's Bakery</label>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- country filter -->
          <div class="sub-filter filter-hide" aria-labelledby="static-filter-country" data-toggle="checkboxgroup">
            <ul role="listbox">
              <li role="option">
                <div class="filter-item pad-responsive-lr">
                  <div class="checkbox">
                    <input id="static-check-country" type="checkbox" data-indeterminate checked/>
                    <label for="static-check-country">Select All</label>
                  </div>
                </div>
                <ul class="filter-checklist">
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-AUD" type="checkbox"/>
                      <label for="static-check-AUD">Australia</label>
                    </div>
                  </li>
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-CAD" type="checkbox"/>
                      <label for="static-check-CAD">Canada</label>
                    </div>
                  </li>
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-FR" type="checkbox"/>
                      <label for="static-check-FR">France</label>
                    </div>
                  </li>
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-DE" type="checkbox"/>
                      <label for="static-check-DE">Germany</label>
                    </div>
                  </li>
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-HK" type="checkbox"/>
                      <label for="static-check-HK">Hong Kong</label>
                    </div>
                  </li>
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-INR" type="checkbox"/>
                      <label for="static-check-INR">India</label>
                    </div>
                  </li>
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-JP" type="checkbox"/>
                      <label for="static-check-JP">Japan</label>
                    </div>
                  </li>
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-MX" type="checkbox"/>
                      <label for="static-check-MX">Mexico</label>
                    </div>
                  </li>
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-ES" type="checkbox"/>
                      <label for="static-check-ES">Spain</label>
                    </div>
                  </li>
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-US" type="checkbox"/>
                      <label for="static-check-US">United States</label>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- company filter -->
          <div class="sub-filter filter-hide" aria-labelledby="static-filter-amount" data-toggle="checkboxgroup">
            <ul role="listbox">
              <li role="option">
                <div class="filter-item pad-responsive-lr">
                  <div class="checkbox">
                    <input id="static-check-amount" type="checkbox" data-indeterminate checked/>
                    <label for="static-check-amount">Select All</label>
                  </div>
                </div>
                <ul class="filter-checklist">
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-800" type="checkbox"/>
                      <label for="static-check-800">$800.76</label>
                    </div>
                  </li>
                  <li class="pad-responsive-lr filter-item" role="option">
                    <div class="checkbox">
                      <input id="static-check-1200" type="checkbox"/>
                      <label for="static-check-1200">$1,240.00</label>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <!-- apply button -->
        <div class="border-t pad">
          <button class="btn-sm-wrapper" data-apply>
            <span class="btn btn-sm btn-primary fluid">Apply</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="display-inline-block-sm-up valign-top scroll-x">
    <table class="table">
      <thead>
        <tr>
          <th>Company Name</th>
          <th>Customer Id</th>
          <th>Country</th>
          <th class="text-align-right">Date</th>
          <th class="text-align-right">Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Charlie Mendez</td>
          <td>567324908234</td>
          <td>Canada</td>
          <td class="text-align-right">Aug 19</td>
          <td class="text-align-right">$800.76</td>
        </tr>
        <tr>
          <td>Patty's Bakery</td>
          <td>567324901231</td>
          <td>Australia</td>
          <td class="text-align-right">Oct 18</td>
          <td class="text-align-right">$1,240.00</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Styles

Class Name Element Description Required
.filter-container <div> Wraps the filter component. Yes
.filter-button <div> Wraps the filter toggle button and the badge icon. Yes if there is a toggle button and badge
.filter <div> Styles the filter component. Yes
.filter-header <header> Styles the filter header. No
.filter-menu <ul> (single filter) / <div> (multi filter) Styles the filter menu. Yes
.filter-item <li> Styles the selectable filter item. Yes
.filter-checklist <ul> Styles multi select filter menu. For multi select filters
.sub-filter <div> Styles and animates the sub-filter menu For multi filters
.filter-hide <div> Hides the sub-filter by sliding it right. .sub-filter
.filter-show <div> Shows the sub-filter by sliding it left. .sub-filter

Functionality

The DLS filter component requires both dls.css and dls.js due to the complexities involved with its logic, functionality, and animations. If you are using dls.js, reference the attributes below for functionality.

Note that functionality to filter datasets is not provided by DLS.js. Add your own functions to filter datasets using the selected values indicated by aria-selected="true" or input:checked.

Attribute Name Options Description Required
data-toggle filter Creates a filter object; required for dls.js functionality. Yes
data-filter single/multi Specifies whether the filter is single or multi. Yes
data-select single/multi Specifies whether the select option is single or multi. Yes
data-badge Identifies the badge icon. Yes
data-show Identifies the filter toggle button that shows/hides the filter component on click. Yes
data-close Identifies the button that closes the filter component on click. Yes
data-reset Identifies the button that resets the filter component selections on click. Yes
data-all Identifies the "Select All" option. Yes
data-filters Wraps the filter selection list. Multi filter
data-apply Identifies the "Apply" button for multi select filters. Multi select filter
data-indeterminate input Marks a checkbox as an indeterminate parent. Multi select filter
data-persistent sm/md/lg/xl Specifies breakpoint at which persistent filter is kept open until switching to a toggle open/close. Persistent filter