Select

Properties

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

1. User clicks into the text input field
2. 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.
3. The user can then select a single option from that list.
4. 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

<Select variant="bottom-lined" size="small" label="City" mb={2}>
  <option>Scooter</option>
  <option>Ride (PHV)</option>
  <option>Taxi</option>
</Select>
<br />
<Select label="City" placeholder="Select your destination">
  <option>Barcelona</option>
  <option>London</option>
  <option>Hamburg</option>
</Select>

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