Skip to content

Dropdown Filter13.10.5

The Dropdown Filter component is used for filtering of data.


$ npm i @if-design-system/dropdown-filter@13.10.5

Edit this section

Usage

In tables

Filters
Name Position Office Availability
John Wicker Hitman London Available
John Wicker Hitman London Available
Bullseye Hitman London Retired
John Wicker Hitman London Available
Wicked Witch Beheader Moscow Away
Black Widow Undercover Agent Copenhagen Dead
Deadpool Pain in the ass ?? Available
Spawn Demon New York Away
Edit this section

Anatomy

Edit this section

Specs

Dropdown Filter
Edit this section

Implementation

<div class="if dropdown-filter-holder">
  <button
    type="button"
    aria-controls="<identifier>"
    aria-haspopup="true"
    role="combobox"
    aria-owns="<identifier>"
    aria-expanded="false"
    class="if dropdown-filter-button"
  >
    Office
  </button>
  <div class="if dropdown-filter" id="<identifier>" role="listbox">
    <ul class="if" aria-activedescendant="<item-identifier>">
      <li class="if">
        <input
          id="<item-identifier>"
          type="checkbox"
          role="option"
          aria-selected="true"
          data-rel="London"
          class="if checkbox"
        />
        <label class="if" for="<item-identifier>">London</label>
      </li></ul>
  </div>
</div>

Filter groups

If you have more filters, you can wrap them:

<ul class="if dropdown-filter-groups">
  <li class="if">
    <div class="if dropdown-filter-holder"></div>
  </li></ul>
Edit this section

Contact us