FilterSelect

An inline method of presenting dropdowns for the selection of filtering criteria.

  • Use with inline text to provide context to the options available, similarly to hint text.
  • Compose the select with text on the left or right so that it reads as a logical sentence to the user.
  • Use for simplifying complex taxonomy around the data the selects augment, to enable the user to filter and personalise their view of it.
  • Within a form.
  • When more than a handful of options are needed in a dropdown, in which case the SelectField may be used.
  • When wanting to display a dropdown as a block in itself.

Live example


Availabile platforms

Platform

Available

Figma

v3+

Web (@ovotech/element)

-

App (@ovotech/element-native)

v3.5+


How to use it

Writing this component

Heading

  • Keep the heading on 1 line (2 max)
  • Make header action-focused

Body copy

  • Keep it clear and concise – aim for approx. 70 characters (3 to 4 lines)
  • Must be single paragraph of one size and style (e.g. no parts bold)
  • Avoid asterisks and small print beneath, keep content in the card

Action

  • Max 4 words
  • Action-focused

Terms and conditions

Show terms later in the customer journey, before they make any purchasing decisions.

General

  • Avoid jargon or internal language
  • Use Plain English - the language our users would say out loud

Composition

FilterSelect guidelines 1

Combine multiple FilterSelects within a sentence structure to make the filters easier to digest and tie them together as a single control mechanism.

If the sentence is likely to appear over multiple lines, use an open line height that ensures the FilterSelects on each line have an unobscured 44px tap target.


Properties

Name

Values

Default

defaultSelected

Option

{ label: '', value: 'default' }

options

Option[]

[]

onSelected

(val: Option) => void

() => null

testID

string

"select"

rightText

string

 

leftText

string

 

dropdownDirection

"left" | "right"

”right”

Option object

Name

Values

Default

label

string

 

value

string

 

collapsedLabel (optional)

string

 


Related components