Filters

Filters allows a user to narrow down results using multiple attributes.

BETA Component

This component has just been released in BETA, please share your feedback with us on the Community.

Instant filtering

    <div class="nsw-filters nsw-filters--instant">
      <div class="nsw-filters__wrapper">
        <div class="nsw-filters__title">Filter results</div>
        <div class="nsw-filters__list">
          <div class="nsw-filters__item">
            <label class="nsw-form__label" for="filters-instant-regions">Region</label>
            <select class="nsw-form__select" id="filters-instant-regions" name="filters-instant-regions">
              <option value="">Please select</option>  
              <option value="Central Coast">Central Coast</option>
              <option value="Central West &amp; Orana">Central West &amp; Orana</option>
              <option value="Far West">Far West</option>
              <option value="Hunter">Hunter</option>
              <option value="Illawarra-Shoalhaven">Illawarra-Shoalhaven</option>
              <option value="New England &amp; North West">New England &amp; North West</option>
              <option value="North Coast">North Coast</option>
              <option value="Riverina Murray">Riverina Murray</option>
            </select>
          </div>
          <div class="nsw-filters__item">
            <fieldset class="nsw-form__fieldset">
              <legend class="nsw-form__legend">Categories</legend>
              <input class="nsw-form__checkbox-input" type="checkbox" name="filters-instant-categories" value="Customer Service" id="filters-instant-categories-1">
              <label class="nsw-form__checkbox-label" for="filters-instant-categories-1">Customer Service</label>
              <input class="nsw-form__checkbox-input" type="checkbox" name="filters-instant-categories" value="Communities and Justice" id="filters-instant-categories-2">
              <label class="nsw-form__checkbox-label" for="filters-instant-categories-2">Communities and Justice</label>
              <input class="nsw-form__checkbox-input" type="checkbox" name="filters-instant-categories" value="Education" id="filters-instant-categories-3">
              <label class="nsw-form__checkbox-label" for="filters-instant-categories-3">Education</label>
              <input class="nsw-form__checkbox-input" type="checkbox" name="filters-instant-categories" value="Health" id="filters-instant-categories-4">
              <label class="nsw-form__checkbox-label" for="filters-instant-categories-4">Health</label>
              <input class="nsw-form__checkbox-input" type="checkbox" name="filters-instant-categories" value="Planning" id="filters-instant-categories-5">
              <label class="nsw-form__checkbox-label" for="filters-instant-categories-5">Planning</label>
            </fieldset>
          </div>
        </div>
        <div class="nsw-filters__cancel">
          <button type="reset">Clear all filters</button>
        </div>
      </div>
    </div>

 

Copy

Batch filtering

With mobile implementation 

    <form class="nsw-filters nsw-filters--fixed js-filters">
      <div class="nsw-filters__controls">
        <button>
          <i class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">tune</i>
          <span>Filter results</span>
        </button>
      </div>
      <div class="nsw-filters__wrapper">
        <div class="nsw-filters__back">
          <button>
            <i class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">keyboard_arrow_left</i>
            <span>Back</span>
          </button>
        </div>
        <div class="nsw-filters__title">Filter results</div>
        <div class="nsw-filters__list">
          <div class="nsw-filters__item">
            <label class="nsw-form__label" for="filters-batch-keyword">Keyword</label>
            <input class="nsw-form__input" type="text" id="filters-batch-keyword" name="filters-keyword">
          </div>
          <div class="nsw-filters__item">
            <label class="nsw-form__label" for="filters-batch-regions">Region</label>
            <select class="nsw-form__select" id="filters-batch-regions" name="filters-batch-regions">
              <option value="">Please select</option>  
              <option value="Central Coast">Central Coast</option>
              <option value="Central West &amp; Orana">Central West &amp; Orana</option>
              <option value="Far West">Far West</option>
              <option value="Hunter">Hunter</option>
              <option value="Illawarra-Shoalhaven">Illawarra-Shoalhaven</option>
              <option value="New England &amp; North West">New England &amp; North West</option>
              <option value="North Coast">North Coast</option>
              <option value="Riverina Murray">Riverina Murray</option>
            </select>
          </div>
          <div class="nsw-filters__item">
            <fieldset class="nsw-form__fieldset">
              <legend class="nsw-form__legend">Categories</legend>
              <input class="nsw-form__checkbox-input" type="checkbox" name="filters-batch-categories" value="Customer Service" id="filters-batch-categories-1">
              <label class="nsw-form__checkbox-label" for="filters-batch-categories-1">Customer Service</label>
              <input class="nsw-form__checkbox-input" type="checkbox" name="filters-batch-categories" value="Communities and Justice" id="filters-batch-categories-2">
              <label class="nsw-form__checkbox-label" for="filters-batch-categories-2">Communities and Justice</label>
              <input class="nsw-form__checkbox-input" type="checkbox" name="filters-batch-categories" value="Education" id="filters-batch-categories-3">
              <label class="nsw-form__checkbox-label" for="filters-batch-categories-3">Education</label>
            </fieldset>
          </div>
        </div>
        <div class="nsw-filters__accept">
          <button type="submit" class="nsw-button nsw-button--primary nsw-button--full-width" disabled="">Apply filters</button>
        </div>
        <div class="nsw-filters__cancel">
          <button type="reset">Clear all filters</button>
        </div>
      </div>
    </form>

 

Copy

Batch filtering

With expanding multiselect and compact mobile implementation

    <form class="nsw-filters nsw-filters--fixed js-filters">
      <div class="nsw-filters__controls nsw-filters__controls--active">
        <button>
          <i class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">tune</i>
          <span>Filter results  (4)</span>
        </button>
      </div>
      <div class="nsw-filters__wrapper">
        <div class="nsw-filters__back">
          <button>
            <i class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">keyboard_arrow_left</i>
            <span>Back</span>
          </button>
        </div>
        <div class="nsw-filters__title">Filter results</div>
        <div class="nsw-filters__list">
          <div class="nsw-filters__item">
            <label class="nsw-form__label" for="filters-all-keyword">Keyword</label>
            <input class="nsw-form__input" type="text" id="filters-all-keyword" name="filters-keyword" value="Digital Design System">
          </div>
          <div class="nsw-filters__item">
            <label class="nsw-form__label" for="filters-all-regions">Region</label>
            <select class="nsw-form__select" id="filters-all-regions" name="filters-all-regions">
              <option value="">Please select</option>  
              <option value="Central Coast">Central Coast</option>
              <option value="Central West &amp; Orana">Central West &amp; Orana</option>
              <option value="Far West">Far West</option>
              <option value="Hunter">Hunter</option>
              <option value="Illawarra-Shoalhaven">Illawarra-Shoalhaven</option>
              <option value="New England &amp; North West">New England &amp; North West</option>
              <option value="North Coast">North Coast</option>
              <option value="Riverina Murray">Riverina Murray</option>
            </select>
          </div>
          <div class="nsw-filters__item">
            <fieldset class="nsw-form__fieldset">
              <legend class="nsw-form__legend">Categories</legend>
              <input class="nsw-form__checkbox-input" type="checkbox" name="filters-all-categories" value="Customer Service" id="filters-all-categories-1">
              <label class="nsw-form__checkbox-label" for="filters-all-categories-1">Customer Service</label>
              <input class="nsw-form__checkbox-input" type="checkbox" name="filters-all-categories" value="Communities and Justice" id="filters-all-categories-2" checked="">
              <label class="nsw-form__checkbox-label" for="filters-all-categories-2">Communities and Justice</label>
              <input class="nsw-form__checkbox-input" type="checkbox" name="filters-all-categories" value="Education" id="filters-all-categories-3" checked="">
              <label class="nsw-form__checkbox-label" for="filters-all-categories-3">Education</label>
              <input class="nsw-form__checkbox-input" type="checkbox" name="filters-all-categories" value="Health" id="filters-all-categories-4">
              <label class="nsw-form__checkbox-label" for="filters-all-categories-4">Health</label>
              <div class="nsw-filters__all hidden">
                <input class="nsw-form__checkbox-input" type="checkbox" name="filters-all-categories" value="Planning" id="filters-all-categories-5">
                <label class="nsw-form__checkbox-label" for="filters-all-categories-5">Planning</label>
                <input class="nsw-form__checkbox-input" type="checkbox" name="filters-all-categories" value="Premier and Cabinet" id="filters-all-categories-6">
                <label class="nsw-form__checkbox-label" for="filters-all-categories-6">Premier and Cabinet</label>
                <input class="nsw-form__checkbox-input" type="checkbox" name="filters-all-categories" value="Regional NSW" id="filters-all-categories-7">
                <label class="nsw-form__checkbox-label" for="filters-all-categories-7">Regional NSW</label>
                <input class="nsw-form__checkbox-input" type="checkbox" name="filters-all-categories" value="Transport" id="filters-all-categories-8">
                <label class="nsw-form__checkbox-label" for="filters-all-categories-8">Transport</label>
                <input class="nsw-form__checkbox-input" type="checkbox" name="filters-all-categories" value="Treasury" id="filters-all-categories-9">
                <label class="nsw-form__checkbox-label" for="filters-all-categories-9">Treasury</label>
              </div>
              <button class="nsw-filters__more">Show all categories (9)</button>
            </fieldset>
          </div>
          <div class="nsw-filters__item">
            <div class="nsw-form__group">
              <fieldset class="nsw-form__date">
                <legend class="nsw-form__label">Date published from:</legend>
                <div class="nsw-form__date-wrapper">
                  <div class="nsw-form__date-input">
                    <label class="nsw-form__label nsw-form__label--small" for="filters-all-date-from-day">Day</label>
                    <input class="nsw-form__input" type="text" maxlength="2" id="filters-all-date-from-day" name="filters-all-date-from-day">
                  </div>
                  <div class="nsw-form__date-input">
                    <label class="nsw-form__label nsw-form__label--small" for="filters-all-date-from-month">Month</label>
                    <input class="nsw-form__input" type="text" maxlength="2" id="filters-all-date-from-month" name="filters-all-date-from-month">
                  </div>
                  <div class="nsw-form__date-input nsw-form__date-input--large">
                    <label class="nsw-form__label nsw-form__label--small" for="filters-all-date-from-year">Year</label>
                    <input class="nsw-form__input" type="text" maxlength="4" id="filters-all-date-from-year" name="filters-all-date-from-year">
                  </div>
                </div>
              </fieldset>
            </div>
            <div class="nsw-form__group">
              <fieldset class="nsw-form__date">
                <legend class="nsw-form__label">Date published to:</legend>
                <div class="nsw-form__date-wrapper">
                  <div class="nsw-form__date-input">
                    <label class="nsw-form__label nsw-form__label--small" for="filters-all-date-to-day">Day</label>
                    <input class="nsw-form__input" type="text" maxlength="2" id="filters-all-date-to-day" name="filters-all-date-to-day">
                  </div>
                  <div class="nsw-form__date-input">
                    <label class="nsw-form__label nsw-form__label--small" for="filters-all-date-to-month">Month</label>
                    <input class="nsw-form__input" type="text" maxlength="2" id="filters-all-date-to-month" name="filters-all-date-to-month">
                  </div>
                  <div class="nsw-form__date-input nsw-form__date-input--large">
                    <label class="nsw-form__label nsw-form__label--small" for="filters-all-date-to-year">Year</label>
                    <input class="nsw-form__input" type="text" maxlength="4" id="filters-all-date-to-year" name="filters-all-date-to-year">
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
        </div>
        <div class="nsw-filters__accept">
          <button type="submit" class="nsw-button nsw-button--primary nsw-button--full-width">Apply filters</button>
        </div>
        <div class="nsw-filters__cancel">
          <button type="reset">Clear all filters</button>
        </div>
      </div>
    </form>

 

Copy

Filters help users narrow down the results of large data sets to find something specific. They give the user the power to refine results based on their desired criteria and eliminate the need for numerous searches. 

Do: 

  • choose the right filters for your content. Too many filters may confuse users, so make sure your filters are relevant and differentiable 
  • keep the original text or selection a user has made visible so they can see their current filters
  • allow the user to remove and clear all filters easily 
  • truncate larger filtering sets with “Show all categories”, making the most popular choices of your users the ones that are initially surfaced

When to avoid 

Do not use: 

  • when there are limited results to present, consider displaying all results without filters.

How the component works

Filters can be returned in instant or batch updates. Instant updates return results after each individual selection is made by the user. Consider instant update filters when: 

  • a user would only expect to make one filter selection at a time
  • filters can return results based on an individual selection, ie dropdown or checkbox

Batch updates allows a user to select multiple filters before selecting “Apply filters” to return updated results. Consider batch update filters when:

  • users would be expected to select multiple related filters
  • filters require multiple actions, ie keywords or date ranges

Small screens

On small screens, filters can be are launched using the mobile filter icon. When a user selects “Filter results” the filters open in full screen so the user can navigate and select desired filters.

For batch updates: 

  • “Back” bar is sticky to top of screen and on selection closes filtering window with no updates to results.
  • “Apply filters” button is sticky to bottom of screen and on selection closes filtering window and displays updated results. 
  • “Apply filters” is disabled if no filters are selected
  • When a filter is selected the icon changes to filled version and displays number of filters selected in brackets.

For instant updates:

  • “Back” is sticky to top of screen and on selection closes filtering window and displays updated results. 
  • When a filter is selected the icon changes to filled version and displays number of filters selected in brackets.