Skip to main content

Filtering panel

Overview​

Filtering panel allows users to add or remove data items from displayed list of items by turning on and off certain predefined attributes.

Common usage​

When to users​

  1. Used to help user to trim down visible items when working with large amount of products, documents or other element
  2. Use with large data sets
  3. Use with complex data structure to filter data visualization, reports or content

When not to use​

  • Don't use with small data sets when filtering can be omitted

Use cases​

Vertical panel:

  • filtering search results
  • filtering products, software, firmware and document list
  • filtering data tables

Horizontal panel:

  • filtering data tables

General guidance​

Main rules​

  • use clear and visible labels to help users understand what options are in the filter
  • group related filters together
  • don't show more than 7 options at a time. For more options use "View more" button
  • make sure filter panel behaves the same way on all devices
  • If it's common for users to add multiple filters quickly consider adding "Apply" button. This would stop page from loading every time when user selects new option.
  • allow users to see the effects of their filters in real-time to avoid confusion.
  • allow users to easily add, remove, and combine filters.
  • allow users to narrow down options list by search
  • For vertical filters: maintain the state of accordions and keep them open, even if user has set a new filter or refreshed the page
  • For vertical filters: if filters are not available any longer, rather than hiding them automatically, disable them and explain why they are disabled (with a hint)

Accessibility guidance​

  • allow the user to navigate with a keyboard
  • follow the accessibility guidance for radio buttons, checkboxes, inputs, accordions and buttons

Variants​

Filtering panel designed for 2 variants:

Vertical filtering​

Vertical filtering

Vertical filter features accordions that can expand to show filtering options. The accordions contains additional components that determine the filter’s selection method, such as radio buttons, checkboxes or inputs.

The layout choice depends on the filtering hierarchical level. All layout should have a visual logic. There are two layouts:

Panel - is a type of layout where filter "accordions" are placed inside vertical frame. This type is more prominent and can be used if filters needs to stand out and/or filter groups are related.

Filter groups  - is a type of layout where filter accordion are stacked vertically inside filter groups and each group is visually separated from other groups.

Loading...
Live Editor
<div class="qds-controls qds-related" style={{ width: '314px' }}>
  <div class="qds-controls flex-row justify-between" style={{ width: '100%' }}>
    <qds-title layer="panel" level="subsection">
      Filter by:
    </qds-title>
    <qds-button
      text="Reset all"
      importance="subdued"
      icon-name="arrow-circular-clockwise"
    ></qds-button>
  </div>

  <div class="qds-controls" gap={{ "var(--qds-panel-gap-children-unrelated)" }}>
    <qds-web-accordion layer="panel" level="subsection">
      <qds-web-accordion-item text="Product type">
        <div class="qds-controls" style={{ "var(--qds-panel-gap-children-unrelated)" }}>
          <div style={{ width: '100%' }}>
            <qds-input type="search" style={{ width: '100%' }}></qds-input>
          </div>
          <div
            class="qds-controls"
            role="radiogroup"
            aria-label="Product type"
            style={{ gap: "var(--qds-panel-gap-children-related)" }}
          >
            <qds-radio
              name="example-group1"
              text="8-12mm and 16mm Pushbuttons, Switches, Pilots Lights"
              size="standard"
              value="example-value-1"
            ></qds-radio>
            <qds-radio
              name="example-group1"
              text="22 mm Pushbuttons, Switches, Pilots Lights"
              size="standard"
              value="example-value-1"
            ></qds-radio>
            <qds-radio
              name="example-group1"
              text="20 mm Pushbuttons, Switches, Pilots Lights"
              size="standard"
              value="example-value-1"
            ></qds-radio>
          </div>
        </div>
      </qds-web-accordion-item>

      <qds-web-accordion-item text="Category">
        <div class="qds-controls" style={{ "var(--qds-panel-gap-children-unrelated)" }}>
          <div style={{ width: '100%' }}>
            <qds-input type="search" style={{ width: '100%' }}></qds-input>
          </div>
          <div
            class="qds-controls"
            role="group"
            aria-label="Category"
            style={{ gap: "var(--qds-panel-gap-children-related)" }}
          >
            <qds-checkbox
              name="example-group2"
              text="Pushbuttons"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
            <qds-checkbox
              name="example-group2"
              text="Selector switches"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
            <qds-checkbox
              name="example-group2"
              text="Pilot lights"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
            <qds-checkbox
              name="example-group2"
              text="Specific"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
            <qds-checkbox
              name="example-group2"
              text="Legends"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
            <qds-checkbox
              name="example-group2"
              text="Boots"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
            <qds-checkbox
              name="example-group2"
              text="Emergency switching off"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
          </div>
          <div
            class="qds-controls justify-between flex-row"
            style={{ width: '100%' }}
          >
            <qds-button
              text="View more"
              importance="subdued"
              icon-name="dropdown"
              library-name="core"
            ></qds-button>
            <qds-button text="Select all" importance="subdued"></qds-button>
          </div>
        </div>
      </qds-web-accordion-item>

      <qds-web-accordion-item is-open="true" text="Created date">
        <div
          class="qds-controls"
          role="group"
          aria-label="Created date"
          style={{ "var(--qds-panel-gap-children-unrelated)" }}
        >
          <div class="qds-controls qds-related" style={{ width: '100%' }}>
            <qds-label text="Start date"></qds-label>
            <qds-input type="date" style={{ width: '100%' }}></qds-input>
          </div>
          <div class="qds-controls qds-related" style={{ width: '100%' }}>
            <qds-label text="End date"></qds-label>
            <qds-input type="date" style={{ width: '100%' }}></qds-input>
          </div>
          <div>
            <qds-button text="Apply"></qds-button>
          </div>
        </div>
      </qds-web-accordion-item>
    </qds-web-accordion>
    <div class="qds-controls" style={{ width: '100%' }}>
      <qds-button
        text="View more filters"
        style={{ width: '100%' }}
      ></qds-button>
    </div>
  </div>
</div>

Horizontal filtering​

Horizontal filters features dropdowns or inputs that open to show filtering options. The dropdown contains additional components that determine the filter’s selection method, such as radio button, checkbox or dropdown.

Panel - can be expanded if filters don't fit into one row.

The layout choice depends on the filtering hierarchical level. All layouts should have a visual logic.

Loading...
Live Editor
<div
  class="flex justify-between"
  style={{ background: 'var(--qds-theme-main-background)' }}
>
  <div style={{ maxWidth: '270px' }}>
    <qds-web-accordion
      layer="panel"
      level="subsection"
      style={{ padding: 'var(--qds-panel-padding)' }}
    >
      <qds-web-accordion-item text="Product type" divider="false">
        <div class="qds-controls" style={{ "var(--qds-panel-gap-children-unrelated)" }}>
          <div style={{ width: '100%' }}>
            <qds-input type="search" style={{ width: '100%' }}></qds-input>
          </div>
          <div
            class="qds-controls"
            role="radiogroup"
            aria-label="Product type"
            style={{ gap: "var(--qds-panel-gap-children-related)" }}
          >
            <qds-radio
              name="example-group5"
              text="8-12mm and 16mm Pushbuttons, Switches, Pilots Lights"
              size="standard"
              value="example-value-1"
            ></qds-radio>
            <qds-radio
              name="example-group5"
              text="22 mm Pushbuttons, Switches, Pilots Lights"
              size="standard"
              value="example-value-1"
            ></qds-radio>
            <qds-radio
              name="example-group5"
              text="20 mm Pushbuttons, Switches, Pilots Lights"
              size="standard"
              value="example-value-1"
            ></qds-radio>
            <qds-radio
              name="example-group5"
              text="Control Stations, Pendant Stations, and Enclosures"
              size="standard"
              value="example-value-1"
            ></qds-radio>
            <qds-radio
              name="example-group5"
              text="Foot Switches, Access Control, and Safety Components"
              size="standard"
              value="example-value-1"
            ></qds-radio>
            <qds-radio
              name="example-group5"
              text="Industrial Wireless Remote Control"
              size="standard"
              value="example-value-1"
            ></qds-radio>
            <qds-radio
              name="example-group5"
              text="Joystick Controllers and Rotary Cam Switches"
              size="standard"
              value="example-value-1"
            ></qds-radio>
          </div>
          <div class="qds-controls">
            <qds-button
              text="View more"
              importance="subdued"
              icon-name="dropdown"
              library-name="core"
            ></qds-button>
          </div>
        </div>
      </qds-web-accordion-item>
    </qds-web-accordion>
  </div>

  <div style={{ maxWidth: '255px' }}>
    <qds-web-accordion
      layer="panel"
      level="subsection"
      style={{ padding: 'var(--qds-panel-padding)' }}
    >
      <qds-web-accordion-item text="Subcategory" divider="false">
        <div class="qds-controls" style={{ "var(--qds-panel-gap-children-unrelated)" }}>
          <div style={{ width: '100%' }}>
            <qds-input type="search" style={{ width: '100%' }}></qds-input>
          </div>

          <div
            class="qds-controls"
            role="group"
            aria-label="Subcategory"
            style={{ gap: "var(--qds-panel-gap-children-related)" }}
          >
            <qds-checkbox
              name="example-group6"
              text="Pushbuttons"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
            <qds-checkbox
              name="example-group6"
              text="Selector switches"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
            <qds-checkbox
              name="example-group6"
              text="Pilot lights"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
            <qds-checkbox
              name="example-group6"
              text="Specific"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
            <qds-checkbox
              name="example-group6"
              text="Legends"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
            <qds-checkbox
              name="example-group6"
              text="Boots"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
            <qds-checkbox
              name="example-group6"
              text="Emergency switching off"
              size="standard"
              value="example-value-1"
            ></qds-checkbox>
          </div>

          <div
            class="qds-controls justify-between flex-row"
            style={{ width: '100%' }}
          >
            <qds-button
              text="View more"
              importance="subdued"
              icon-name="dropdown"
              library-name="core"
            ></qds-button>
            <qds-button text="Select all" importance="subdued"></qds-button>
          </div>
        </div>
      </qds-web-accordion-item>
    </qds-web-accordion>
  </div>

  <div style={{ maxWidth: '255px' }}>
    <qds-web-accordion
      layer="panel"
      level="subsection"
      style={{ padding: 'var(--qds-panel-padding)' }}
    >
      <qds-web-accordion-item text="Range" divider="false">
        <div
          class="qds-controls"
          role="group"
          aria-label="Created date"
          style={{ "var(--qds-panel-gap-children-unrelated)" }}
        >
          <div class="qds-controls qds-related" style={{ width: '100%' }}>
            <qds-label text="Start date"></qds-label>
            <qds-input type="date" style={{ width: '100%' }}></qds-input>
          </div>
          <div class="qds-controls qds-related" style={{ width: '100%' }}>
            <qds-label text="End date"></qds-label>
            <qds-input type="date" style={{ width: '100%' }}></qds-input>
          </div>
          <div>
            <qds-button text="Apply"></qds-button>
          </div>
        </div>
      </qds-web-accordion-item>
    </qds-web-accordion>
  </div>
</div>

Anatomy​

Vertical Filtering panel Vertical filter groups

Selection methods​

Filtering panel can include the following selection methods

  1. single select
  2. multi select
  3. search
  4. date input

Responsive​

Accordion component is designed for 2 platforms:

  • desktop – 1280 px and higher
  • mobile (includes tablet) – 360 px to 767 px

On Tablet filtering panel is triggered by button and appears as a onscreen filtering panel.

On Mobile filtering panel is triggered by button and appears as full screen onscreen filtering. "Show results(x)" button appear. Filters can be applied only by clicking on "Show results" button

Selected options appear below the filter title and should be visible when panel is collapsed.

Last updated on