Filter Input Component

Default Filter Input

The default implementation of the Filter Input component is meant to client-side filtering of an existing list in real-time. For accessibility purposes, to tie the Filter Input with the results, the Filter Input should include aria-controls="filter-results-container-id" where the ID matches the results container ID.

The input placeholder is required and should be descriptive of the filtering action. The 'Clear' button show/hide uses CSS to show/hide the button when the input is empty or filled. Without the placeholder, that interaction would break.

<span class="filter-input" role="search" aria-label="Filter list">
  <span class="textbox textbox--fluid">
    <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
      <use href="#icon-search-16" />
    </svg>
    <input
      class="textbox__control"
      placeholder="Filter list"
      type="search"
      aria-label="Filter list"
      aria-controls="filter-results-container-id"
      required
    />
    <button
      class="icon-btn icon-btn--transparent icon-btn--small filter-input__clear-btn"
      type="button"
      aria-label="Clear filter"
    >
      <svg aria-hidden="true" class="icon icon--16" width="16" height="16">
        <use href="#icon-clear-16" />
      </svg>
    </button>
  </span>
</span>

Filter Input Size Variations

The Filter Input component can be used in different sizes. The default size is medium. The small size can be implemented by adding the modifier, filter-input--small and is used when the Filter Input is used in a smaller context.

The larger size can be implemented by adding the modifier, filter-input--large . The large size is used when the Filter Input is used in a larger context, such as potentially a full-page implementation.

<span
  class="filter-input filter-input--small"
  role="search"
  aria-label="Filter list"
>
  <span class="textbox textbox--fluid">
    <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
      <use href="#icon-search-16" />
    </svg>
    <input
      class="textbox__control"
      placeholder="Filter list"
      type="search"
      aria-controls="filter-results-container-id"
      aria-label="Filter list"
      required
    />
    <button
      class="icon-btn icon-btn--transparent icon-btn--small filter-input__clear-btn"
      type="button"
      aria-label="Clear filter"
    >
      <svg aria-hidden="true" class="icon icon--16" width="16" height="16">
        <use href="#icon-clear-16" />
      </svg>
    </button>
  </span>
</span>
<span
  class="filter-input filter-input--large"
  role="search"
  aria-label="Filter list"
>
  <span class="textbox textbox--fluid">
    <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
      <use href="#icon-search-16" />
    </svg>
    <input
      class="textbox__control"
      placeholder="Filter list"
      type="search"
      aria-controls="filter-results-container-id"
      aria-label="Filter list"
      required
    />
    <button
      class="icon-btn icon-btn--transparent icon-btn--small filter-input__clear-btn"
      type="button"
      aria-label="Clear filter"
    >
      <svg aria-hidden="true" class="icon icon--16" width="16" height="16">
        <use href="#icon-clear-16" />
      </svg>
    </button>
  </span>
</span>