The site is not yet optimised for mobile viewing. Please view on screens wider than 768px like your desktop screen.

Search field

Usage

A search field is useful when the list of options for a user to select from are just too many, too long or too varied, to use radio buttons, dropdowns filters or other selection or refinement control components.

Best practice

  • Auto-complete: as the user begins typing their query, a dropdown of available options appears based on the characters the user has entered already.

Definition

Search fields

Simple filter

Usage

Use the Simple filter when there is only one level of filtering (selection) to be made. On the Related content UI module, for examples, there is the option of news or events or both. However, there is not a choice of news, at one level, and the news region, as a additional level.

Simple filter

Extended filter

Code

Desktop

Filter buttons

  • Unselected state: plain--btn
  • Hover state: underline text
  • Selected state: boss--cta

Forthcoming...

Forthcoming...

Primary filter

Usage

Use the Primary filter when there is more than one level of refinement to occur. For example, on the filter sample illustrated below, Plain buttons are used as one level, whilst a dropdown menu is included to add another level.

In addition, a secondary row or tertiary level of filters may be included in a second row. In the illustrator sample, the filter UI devices are check boxes and radio buttons. Any suitable combination is available to be used as long as it is easy for the user to use.

Description

The Primary filter is made up of Plain buttons and any combination form control UI components that are most suitable to assist a user refine their selection. In the example illustrated below, there is a primary row of Plain buttons with a dropdown menu, in addition to a second row of check boxes and radio buttons. See Form components for a definition of each.

Extended filter

Code

Desktop

Label

  • $charcoal--120, bold

Filter buttons

  • Unselected state: plain--btn
  • Hover state: underline text
  • Selected state: boss--cta

Dropdown menu (optional)

Secondary row of filters (optional)

  • Examples:
    • check boxes
    • radio buttons

Forthcoming...

Forthcoming...

Extended filter

Usage

The Extended filter works best with the search results page. It offers the user more options to refine their search further.

For simpler filters use the primary with or without its secondary filters.

Behaviour

Filters refine the content simultaneously as the user selects filter options.

Definition

The Search results filter is basically a form used to refine search results. As such it is made up of form components such as Check boxes, Radio buttons, Dropdown menu, and buttons as needed.

Desktop

Extended filter

Mobile

Extended filter

Code

Desktop

Label

  • $charcoal--120, bold

Filter buttons

  • Unselected state: plain--btn
  • Hover state: underline text
  • Selected state: boss--cta

Dropdown menu (optional)

Secondary row of filters (optional)

  • Examples:
    • check boxes
    • radio buttons

Extended filter button

  • Behavoiur: panel with extended filter options overlays the content page’s right half. Left half has an transparent overlay (.8 opacity)
  • Default state: Manager button with “Add’ icon.
  • Selected state: Plain button with ‘Close’ icon.

Extended option reset

  • Behavoiur: Changes check box state to un-selected.
  • Text link.

Extended filter options

  • Clustered into levels under labels.
  • Check boxes

Forthcoming...

Forthcoming...

Examples in action

Extended filter (Courses) (see More filters)
Extended filter (Scholarships) (see More filters)