- 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
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 |
|