Select
Properties
Name | Type | Default |
---|---|---|
variant | "boxed" | "bottom-lined" Define the display variant with boxed as the default | "boxed" |
size | "medium" | "small" Adjusts the size of the select list | "medium" |
inverted | boolean Adjust colors for display on a dark background | |
error | boolean Indicate that the input contains an error | |
label | string Indicate that the input contains an error | |
placeholder | string Set a placeholder for the select component, allowing users to remove their selection |
Usage
They are typically used when user has 5-15 items to choose from.
Types
Boxes Bottom lined
Appearance
- Label: It should be a sentence and as short as possible while clearly explaining the content of the menu.
- Input: by default we can include a value saying: ‘All [items name]’ or ‘Select an [item name]’
- Item list: Contains the list of all selectable items. These can be grouped into sub-categories under headings.
Placement
They mainly appear in forms but they can also be in other places, like dialog boxes and advanced search.
Behavior
Steps
- User clicks into the text input field
- The arrow icon placed in the input turns down and a list of possible options appear in front of all other permanent UI elements. This list appears just below the input, without hiding the input itself.
- The user can then select a single option from that list.
- The input is updated to show the option selected by the user
Unselect option
Passing the placeholder
will allow users to unselect their selected option. The value sent to the onChange
handler
will be an empty string.
Error state
Errors are shown just in the cases the field is mandatory and just after user clicks the send/save button in the form and never after leaving the select.
Items List
- When the list is longer than the layer shown, include a scroll to navigate
- In cases where a menu item is longer than selector width, the menu will grow to the width of the longest item listed. However, there is a maximum width specified by the component. If the menu item exceeds the maximum width it will be truncated and we will use 3 dots including a tooltip mouse over to see all the content.
- The options will be sorted in a way that will make the most sense to the user. They can be order:
- alphabetically
- numerically
- by most commonly selected option.
- Remove options that rarely get used.
- Remove the options that we know cannot be selected (eg: countries where we don’t work)
Examples
Testing
It is recommended for each Select component to set the id
. This helps with a11y and allows to use the
getByLabelText
selector in @testing-library/react
.
Example:
it('can be selected by label', () => {render(<Select defaultValue="2" label="Example" id="test"><option value="1">test 1</option><option value="2">test 2</option></Select>);userEvent.selectOptions(screen.getByLabelText('Example'), '1');expect(screen.getByLabelText('Example')).toHaveDisplayValue('test 1');});
Combinations
variant="boxed"
size="medium"
variant="boxed"
size="medium"
error
variant="boxed"
size="medium"
inverted
variant="boxed"
size="medium"
inverted
error
variant="boxed"
size="small"
variant="boxed"
size="small"
error
variant="boxed"
size="small"
inverted
variant="boxed"
size="small"
inverted
error
variant="bottom-lined"
size="medium"
variant="bottom-lined"
size="medium"
error
variant="bottom-lined"
size="medium"
inverted
variant="bottom-lined"
size="medium"
inverted
error
variant="bottom-lined"
size="small"
variant="bottom-lined"
size="small"
error
variant="bottom-lined"
size="small"
inverted
variant="bottom-lined"
size="small"
inverted
error