Filter

Filter

Filters are groups of data inputs arranged into labeled sections, usually inside a drawer, popup, or some other constrained space. Honeycomb’s Filter styles do not replace the inputs themselves; instead, they provide the surrounding layout, disclosure behavior, and spacing so existing controls feel like one coherent filter system.

Use Filter when you need a stack of related controls, often grouped by category, that affect the content on the screen.

Filter types

Create a filter or set of filters by adding class .hc-filter to a wrapping element. Each individual filter group should use a native <details> element with class .hc-filter-group, and the group label should be a <summary> with class .hc-filter-group-label.

Immediately following the <summary> should be a sibling with class .hc-filter-group-content. This content box can contain the selects, checkbox groups, radio groups, text inputs, toggles, and date inputs that make up our various filter patterns documented below.

Heroes and villains
Planetary systems Select as many system types as you'd like
html
Expand Edit in Playground Copy 

<div class="hc-filter">
  <details class="hc-filter-group hc-filter-group--static hc-filter-group--select" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Heroes and villains</span>
    </summary>
    <div class="hc-filter-group-content">
      <select id="filter-hav" class="hc-select" name="filter-hav" aria-label="Filter by hero or villain">
        <option selected disabled>Choose an option...</option>
        <option value="DV">Darth Sidious</option>
        <option value="DV">Darth Vader</option>
        <option value="HS">Han Solo</option>
        <option value="LO">Leia Organa</option>
        <option value="LS">Luke Skywalker</option>
      </select>
    </div>
  </details>
  <details class="hc-filter-group hc-filter-group--static hc-filter-group--multiple" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Planetary systems</span>
      <span class="hc-filter-group-label-meta">Select as many system types as you'd like</span>
    </summary>
    <div class="hc-filter-group-content">
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Alderaan</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Coruscant</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Raxus Secundus</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Tatooine</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Yavin IV</span>
        </span>
      </label>
    </div>
  </details>
</div>

Because Filter uses native disclosure elements, keyboard interaction and screen reader state handling come along for free. Add the open attribute to any section that should start expanded.

Multiple choice

Create a multiple choice (checkbox) group by appending the class .hc-filter-group--multiple to the filter group element.

Include all of the checkbox items within the .hc-filter-group-content container, in alphabetical order as siblings.

Planetary systems
html
Expand Edit in Playground Copy 

<div class="hc-filter">
  <details class="hc-filter-group hc-filter-group--multiple" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Planetary systems</span>
    </summary>
    <div class="hc-filter-group-content">
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Alderaan</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Coruscant</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Raxus Secundus</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Tatooine</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Yavin IV</span>
        </span>
      </label>
    </div>
  </details>
</div>

Single choice (radio buttons)

Create a single choice group with inline radio buttons by appending the class .hc-filter-group--single to the filter group element. This is the default method for single choice lists.

Include all of the radio button items within the .hc-filter-group-content container, in alphabetical order as siblings.

Planetary systems
html
Expand Edit in Playground Copy 

<div class="hc-filter">
  <details class="hc-filter-group hc-filter-group--single" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Planetary systems</span>
    </summary>
    <div class="hc-filter-group-content">
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Alderaan</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Coruscant</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Raxus Secundus</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Tatooine</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Yavin IV</span>
        </span>
      </label>
    </div>
  </details>
</div>

Single choice (select menu)

Create a single choice group with a select menu instead by appending the class .hc-filter-group--select to the filter group element. This should be reserved for filters where space is at a premium or you would prefer to not have a scrollable group of radio buttons.

Use a select menu within the .hc-filter-group-content container, ordering the options in alphabetical order.

Heroes and villains
html
Expand Edit in Playground Copy 

<div class="hc-filter">
  <details class="hc-filter-group hc-filter-group--select" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Heroes and villains</span>
    </summary>
    <div class="hc-filter-group-content">
      <select id="filter-hav2" class="hc-select" name="filter-hav2" aria-label="Filter by hero or villain">
        <option selected disabled>Choose an option...</option>
        <option value="DV">Darth Sidious</option>
        <option value="DV">Darth Vader</option>
        <option value="HS">Han Solo</option>
        <option value="LO">Leia Organa</option>
        <option value="LS">Luke Skywalker</option>
      </select>
    </div>
  </details>
</div>

Date and time

Create a date, time, or date range group by appending the class .hc-filter-group--date to the group element.

You can use any of the date and time inputs, including our preferred <hc-datepicker> webcomponent. Patterns for individual inputs and multiple inputs are shown below.

Flight date
Flight time
Flight date range
Flight date range
html
Expand Edit in Playground Copy 

<div class="hc-filter">
  <details class="hc-filter-group hc-filter-group--date" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Flight date</span>
    </summary>
    <div class="hc-filter-group-content">
      <hc-datepicker />
    </div>
  </details>
  <details class="hc-filter-group hc-filter-group--date" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Flight time</span>
    </summary>
    <div class="hc-filter-group-content">
      <input type="time" class="hc-input" placeholder="Select a time" value="10:00" aria-label="Time input" />
    </div>
  </details>
  <details class="hc-filter-group hc-filter-group--date" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Flight date range</span>
    </summary>
    <div class="hc-filter-group-content hc-filter-group-content--half">
      <div class="hc-form-control hc-form-control--placeholder-label">
        <input type="date" class="hc-input hc-input--placeholder-label" placeholder="Start date" aria-label="Start date" />
        <label class="hc-placeholder-label">Start date</label>
      </div>
      <div class="hc-form-control hc-form-control--placeholder-label">
        <input type="date" class="hc-input hc-input--placeholder-label" placeholder="End date" aria-label="End date" />
        <label class="hc-placeholder-label">End date</label>
      </div>
    </div>
  </details>
  <details class="hc-filter-group hc-filter-group--date" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Flight date range</span>
    </summary>
    <div class="hc-filter-group-content">
      <div class="hc-form-control hc-form-control--placeholder-label">
        <input type="date" class="hc-input hc-input--placeholder-label" placeholder="Start date" aria-label="Start date" />
        <label class="hc-placeholder-label">Start date</label>
      </div>
      <div class="hc-form-control hc-form-control--placeholder-label">
        <input type="date" class="hc-input hc-input--placeholder-label" placeholder="End date" aria-label="End date" />
        <label class="hc-placeholder-label">End date</label>
      </div>
    </div>
  </details>
</div>

Text inputs

We generally recommend against raw text inputs as a filter, as text entry should more likely be moved to a search input. If you need to use a text input, append the class .hc-filter-group--text to the group wrapper.

We have a few convenience classes on the content wrapper to arrange them in a row or grid if needed: .hc-filter-group-content--half will put two inputs next to each other in a row, and .hc-filter-group-content--grid will arrange them in a 2x2 grid.

Available ships
Available ships
Available ships
html
Expand Edit in Playground Copy 

<div class="hc-filter">
  <details class="hc-filter-group hc-filter-group--text" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Available ships</span>
    </summary>
    <div class="hc-filter-group-content">
      <input type="text" class="hc-input" placeholder="Ship name..." aria-label="Available ships" />
    </div>
  </details>
  <details class="hc-filter-group hc-filter-group--text" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Available ships</span>
    </summary>
    <div class="hc-filter-group-content hc-filter-group-content--half">
      <input type="text" class="hc-input" placeholder="Ship name..." aria-label="Available ships by name" />
      <input type="text" class="hc-input" placeholder="Manifest ID..." aria-label="Available ships by manifest" />
    </div>
  </details>
  <details class="hc-filter-group hc-filter-group--text" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Available ships</span>
    </summary>
    <div class="hc-filter-group-content hc-filter-group-content--grid">
      <input type="text" class="hc-input" placeholder="Ship name..." aria-label="Available ships by ship name" />
      <input type="text" class="hc-input" placeholder="Manifest ID..." aria-label="Available ships by manifest" />
      <input type="text" class="hc-input" placeholder="Pilot..." aria-label="Available ships by pilot name" />
      <input type="text" class="hc-input" placeholder="Planet docked..." aria-label="Available ships by docking planet" />
    </div>
  </details>
</div>

Toggles

When using toggles within a filter group, append the class .hc-filter-group--toggle to the group element. Toggles should be included with the most common toggles first.

Use the standard toggle size for toggles as a filter item.

Display options
html
Expand Edit in Playground Copy 

<div class="hc-filter">
  <details class="hc-filter-group hc-filter-group--toggle" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Display options</span>
    </summary>
    <div class="hc-filter-group-content">
      <label class="hc-form-control hc-form-control--shrink">
        <input type="checkbox" name="filter-ds" class="hc-toggle" checked />
        <span class="hc-label">
          <span class="hc-label-text">Exclude Gungans</span>
        </span>
      </label>
      <label class="hc-form-control hc-form-control--shrink">
        <input type="checkbox" name="filter-ds" class="hc-toggle" />
        <span class="hc-label">
          <span class="hc-label-text">Bring Mace Windu back</span>
        </span>
      </label>
      <label class="hc-form-control hc-form-control--shrink">
        <input type="checkbox" name="filter-ds" class="hc-toggle" />
        <span class="hc-label">
          <span class="hc-label-text">Make Finn way better</span>
        </span>
      </label>
    </div>
  </details>
</div>

Drawer filters

Filters are typically placed in a Drawer by default. This is just a normal .hc-filter with one or more open sections, inside ot a drawer. We reecommend using a drawer for all filtering aside from single filter groups that are more appropriate for a popover.

Default expanded

In this version, multiple sections can be open at the same time. This is typically the most comfortable pattern when the user is expected to scan several categories in a single pass.

If you have many filter groups, pick 1-3 groups that are most frequently used and have them open by default.

Filters
Heroes and villains
Planetary systems Select as many system types as you'd like
html
Expand Edit in Playground Copy 

<div class="hc-drawer" open>
  <input id="drawer_basic" type="checkbox" name="filter-drawer" class="hc-drawer-toggle" aria-label="Drawer toggle" />
  <div class="hc-drawer-content">
    <header class="hc-drawer-content-title">
      <span class="hc-drawer-content-title-label">Filters</span>
      <label class="hc-button hc-button--tertiary hc-button--icon" aria-label="Close drawer" for="drawer_full">
        <i class="hc-icon hc-icon--close hc-icon--20"></i>
      </label>
    </header>
    <div class="hc-drawer-content-body">
      <div class="hc-filter">
        <details class="hc-filter-group hc-filter-group--select">
          <summary class="hc-filter-group-label">
            <span class="hc-filter-group-label-text">Heroes and villains</span>
          </summary>
          <div class="hc-filter-group-content">
            <select id="filter-hav3" class="hc-select" name="filter-hav3" aria-label="Filter by hero or villain">
              <option selected disabled>Choose an option...</option>
              <option value="DV">Darth Sidious</option>
              <option value="DV">Darth Vader</option>
              <option value="HS">Han Solo</option>
              <option value="LO">Leia Organa</option>
              <option value="LS">Luke Skywalker</option>
            </select>
          </div>
        </details>
        <details class="hc-filter-group hc-filter-group--multiple" open>
          <summary class="hc-filter-group-label">
            <span class="hc-filter-group-label-text">Planetary systems</span>
            <span class="hc-filter-group-label-meta">Select as many system types as you'd like</span>
          </summary>
          <div class="hc-filter-group-content">
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Alderaan</span>
              </span>
            </label>
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Coruscant</span>
              </span>
            </label>
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Raxus Secundus</span>
              </span>
            </label>
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Tatooine</span>
              </span>
            </label>
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Yavin IV</span>
              </span>
            </label>
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Yavin IV</span>
              </span>
            </label>
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Yavin IV</span>
              </span>
            </label>
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Yavin IV</span>
              </span>
            </label>
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Yavin IV</span>
              </span>
            </label>
          </div>
        </details>
      </div>
    </div>
    <footer class="hc-drawer-content-footer">
      <div class="hc-drawer-content-footer-left">
        <button class="hc-button hc-button--tertiary">Reset filters</button>
      </div>
      <div class="hc-drawer-content-footer-right">
        <button class="hc-button hc-button--primary hc-theme">Apply filters</button>
      </div>
    </footer>
  </div>
</div>

Accordion style

If you’d prefer a more compact presentation, ensure that only one filter group is open at a time by adding the same name value to each of the filter groups (on the <details> element). This is similar to the Accordion component.

Filters
Heroes and villains
Planetary systems
Inputs...
Display options
Inputs...
Flight date range
Inputs...
html
Expand Edit in Playground Copy 

<div class="hc-drawer" open>
  <input id="drawer_basic2" type="checkbox" class="hc-drawer-toggle" aria-label="Drawer toggle" />
  <div class="hc-drawer-content">
    <header class="hc-drawer-content-title">
      <span class="hc-drawer-content-title-label">Filters</span>
      <label class="hc-button hc-button--tertiary hc-button--icon" aria-label="Close drawer" for="drawer_full">
        <i class="hc-icon hc-icon--close hc-icon--20"></i>
      </label>
    </header>
    <div class="hc-drawer-content-body">
      <div class="hc-filter">
        <details class="hc-filter-group hc-filter-group--select" name="filter-accordion" open>
          <summary class="hc-filter-group-label">
            <span class="hc-filter-group-label-text">Heroes and villains</span>
          </summary>
          <div class="hc-filter-group-content">
            <select id="filter-hav4" class="hc-select" name="filter-hav4" aria-label="Filter by hero or villain">
              <option selected disabled>Choose an option...</option>
              <option value="DV">Darth Sidious</option>
              <option value="DV">Darth Vader</option>
              <option value="HS">Han Solo</option>
              <option value="LO">Leia Organa</option>
              <option value="LS">Luke Skywalker</option>
            </select>
          </div>
        </details>
        <details class="hc-filter-group hc-filter-group--multiple" name="filter-accordion">
          <summary class="hc-filter-group-label">
            <span class="hc-filter-group-label-text">Planetary systems</span>
          </summary>
          <div class="hc-filter-group-content">
            Inputs...
          </div>
        </details>
        <details class="hc-filter-group hc-filter-group--multiple" name="filter-accordion">
          <summary class="hc-filter-group-label">
            <span class="hc-filter-group-label-text">Display options</span>
          </summary>
          <div class="hc-filter-group-content">
            Inputs...
          </div>
        </details>
        <details class="hc-filter-group hc-filter-group--multiple" name="filter-accordion">
          <summary class="hc-filter-group-label">
            <span class="hc-filter-group-label-text">Flight date range</span>
          </summary>
          <div class="hc-filter-group-content">
            Inputs...
          </div>
        </details>
      </div>
    </div>
    <footer class="hc-drawer-content-footer">
      <div class="hc-drawer-content-footer-left">
        <button class="hc-button hc-button--tertiary">Reset filters</button>
      </div>
      <div class="hc-drawer-content-footer-right">
        <button class="hc-button hc-button--primary hc-theme">Apply filters</button>
      </div>
    </footer>
  </div>
</div>

Popover filters

Sometimes the full drawer is too heavy for a smaller filter section or location in app. For a more compact filter design, use a Popup with the same filter components above.

By default, filters inside of a popup will get a slightly tightened display to keep the controls more comfortable in smaller widths.

Toggle a filter popup
Section filters
Heroes and villains
Planetary systems Select as many system types as you'd like
html
Expand Edit in Playground Copy 

<details class="hc-popup hc-popup--narrow" name="filter-popup" id="filter-popup">
  <summary class="hc-button hc-button--primary">
    Toggle a filter popup
  </summary>
  <div class="hc-popup-content">
    <details name="filter-popup" class="hc-popup-close">
      <summary aria-label="Close popup">
        <i class="hc-icon hc-icon--close"></i>
      </summary>
    </details>
    <div class="hc-popup-content-section hc-popup-content-section--border">
      <span class="hc-h5 hc-h5--no-border">
        Section filters
      </span>
    </div>
    <div class="hc-popup-content-section">
      <div class="hc-filter">
        <details class="hc-filter-group hc-filter-group--select">
          <summary class="hc-filter-group-label">
            <span class="hc-filter-group-label-text">Heroes and villains</span>
          </summary>
          <div class="hc-filter-group-content">
            <select id="filter-hav5" class="hc-select" name="filter-hav5" aria-label="Filter by hero or villain">
              <option selected disabled>Choose an option...</option>
              <option value="DV">Darth Sidious</option>
              <option value="DV">Darth Vader</option>
              <option value="HS">Han Solo</option>
              <option value="LO">Leia Organa</option>
              <option value="LS">Luke Skywalker</option>
            </select>
          </div>
        </details>
        <details class="hc-filter-group hc-filter-group--multiple" open>
          <summary class="hc-filter-group-label">
            <span class="hc-filter-group-label-text">Planetary systems</span>
            <span class="hc-filter-group-label-meta">Select as many system types as you'd like</span>
          </summary>
          <div class="hc-filter-group-content">
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Alderaan</span>
              </span>
            </label>
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Coruscant</span>
              </span>
            </label>
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Raxus Secundus</span>
              </span>
            </label>
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Tatooine</span>
              </span>
            </label>
            <label class="hc-form-control">
              <input type="checkbox" class="hc-checkbox" name="filter-ps" />
              <span class="hc-label">
                <span class="hc-label-text">Yavin IV</span>
              </span>
            </label>
          </div>
        </details>
      </div>
    </div>
    <div class="hc-popup-content-section hc-align--between">
      <button class="hc-button hc-button--link hc-button--secondary">Clear filters</button>
      <button class="hc-button hc-button--primary hc-theme">Apply filters</button>
    </div>
  </div>
</details>

The popover modifier only changes the container spacing. The controls inside should still be the standard Honeycomb inputs.

Additional attributes

Filters have a few additional attributes and behaviors you should be aware of.

Control row

Sometimes a filter group requires additional options or controls. The most common are a “require all” option for multiple choice groups and a “Clear selections button for single or multiple choice groups.

These additional controls should be placed in a sibling element directly after the .hc-filter-group-content element, with a class .hc-filter-group-controls.

Planetary systems
Planetary systems
Planetary systems
html
Expand Edit in Playground Copy 

<div class="hc-filter">
  <details class="hc-filter-group hc-filter-group--multiple" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Planetary systems</span>
    </summary>
    <div class="hc-filter-group-content">
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Alderaan</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Coruscant</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Raxus Secundus</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Tatooine</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Yavin IV</span>
        </span>
      </label>
    </div>
    <div class="hc-filter-group-controls">
      <label class="hc-form-control hc-form-control--shrink">
        <input type="checkbox" class="hc-toggle hc-toggle--sm hc-theme" />
        <span class="hc-label">
          <span class="hc-label-text">Require all selections</span>
        </span>
      </label>
    </div>
  </details>
  <details class="hc-filter-group hc-filter-group--multiple" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Planetary systems</span>
    </summary>
    <div class="hc-filter-group-content">
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-aoc" />
        <span class="hc-label">
          <span class="hc-label-text">Alderaan</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-aoc" />
        <span class="hc-label">
          <span class="hc-label-text">Coruscant</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-aoc" />
        <span class="hc-label">
          <span class="hc-label-text">Raxus Secundus</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-aoc" />
        <span class="hc-label">
          <span class="hc-label-text">Tatooine</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-aoc" />
        <span class="hc-label">
          <span class="hc-label-text">Yavin IV</span>
        </span>
      </label>
    </div>
    <div class="hc-filter-group-controls">
      <button class="hc-button hc-button--link hc-button--link--tight hc-theme" onclick="document.querySelectorAll('input[name=filter-aoc]').forEach(input => input.checked = !input.checked);">Select all</button>
    </div>
  </details>
  <details class="hc-filter-group hc-filter-group--single" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Planetary systems</span>
    </summary>
    <div class="hc-filter-group-content">
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="filter-aor" />
        <span class="hc-label">
          <span class="hc-label-text">Alderaan</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="filter-aor" />
        <span class="hc-label">
          <span class="hc-label-text">Coruscant</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="filter-aor" />
        <span class="hc-label">
          <span class="hc-label-text">Raxus Secundus</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="filter-aor" />
        <span class="hc-label">
          <span class="hc-label-text">Tatooine</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="radio" class="hc-radio" name="filter-aor" />
        <span class="hc-label">
          <span class="hc-label-text">Yavin IV</span>
        </span>
      </label>
    </div>
    <div class="hc-filter-group-controls">
      <button class="hc-button hc-button--link hc-button--link--tight hc-theme" onclick="document.querySelector('input[name=filter-aor]:checked').checked = false;">Clear selection</button>
    </div>
  </details>
</div>

Scroll behavior on long lists

When you have very long lists of checkboxes or radio buttons, the filter group will automatically control the overflow. Eight items will be visibile, with the remainder scrollable within the group itself.

This behavior is automatic but will only work on filter groups that have the .hc-filter-group--multiple and .hc-filter-group--single classes.

Planetary systems
html
Expand Edit in Playground Copy 

<div class="hc-filter">
  <details class="hc-filter-group hc-filter-group--multiple" open>
    <summary class="hc-filter-group-label">
      <span class="hc-filter-group-label-text">Planetary systems</span>
    </summary>
    <div class="hc-filter-group-content">
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Alderaan</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Coruscant</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Raxus Secundus</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Tatooine</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Yavin IV</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Yavin IV</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Yavin IV</span>
        </span>
      </label>
      <label class="hc-form-control">
        <input type="checkbox" class="hc-checkbox" name="filter-ps" />
        <span class="hc-label">
          <span class="hc-label-text">Yavin IV</span>
        </span>
      </label>
    </div>
    <div class="hc-filter-group-controls">
      <label class="hc-form-control hc-form-control--shrink">
        <input type="checkbox" class="hc-toggle hc-toggle--sm hc-theme" />
        <span class="hc-label">
          <span class="hc-label-text">Require all selections</span>
        </span>
      </label>
    </div>
  </details>
</div>

Class reference

Filter uses the following classes for elements and modifiers:

Class Type Description
hc-filter Element Parent wrapper for the full filter component
hc-filter-group Element A single filter group, intended for a native <details> element
hc-filter-group-label Element Group heading, intended for the group's <summary> element
hc-filter-group-label-text Element Primary text inside of the group heading
hc-filter-group-label-meta Element Optional secondary text below the filter group heading
hc-filter-group-content Element Wrapping element that contains the entirety of the filter group content
hc-filter-group-controls Element Optional footer controls specific to the filter group