SelectList

Properties

Name	Type	Default
variant	"boxed" \| "bottom-lined" Define style of the SelectList component	"boxed"
size	"medium" \| "small" Adjusts the size of the select list component	"medium"
label	string Sets a label for the input
error	boolean Sets styles to indicate an error
inverted	boolean Adjust colors for display on a dark background

The SelectList supports margin and width styled-system props.

Additionally, most of the properties for the react-select component are passed to the component (read more on react-select.com/props)

Disabled props

The following properties have been disabled since they aren't supported by this library.

'react-select/async' (Feature currently not supported at FN)
theme (Wave's theme)
makeAnimated(Feature currently not supported at FN)
classNamePrefix (directly defined into Wave SelectList)
isLoading (Async not implemented yet)
loadingMessage
isRtl

Example

Select...

City

<SelectList
  id="select-list-playground"
  label="City"
  onChange={change => console.log(change)}
  options={[
    {
      label: 'Barcelona',
      value: 'bcn',
    },
    {
      label: 'Hamburg',
      value: 'ham',
    },
    {
      label: 'Paris',
      value: 'par',
      isDisabled: true,
    },
  ]}
/>

<SelectList
  id="select-list-playground"
  label="City"
  onChange={change => console.log(change)}
  options={[
    {
      label: 'Barcelona',
      value: 'bcn',
    },
    {
      label: 'Hamburg',
      value: 'ham',
    },
    {
      label: 'Paris',
      value: 'par',
      isDisabled: true,
    },
  ]}
/>

Combinations

variant="boxed"

size="medium"

Group

variant="boxed"

size="medium"

isMulti

Group

variant="boxed"

size="medium"

error

Group

variant="boxed"

size="medium"

error

isMulti

Group

variant="boxed"

size="medium"

inverted

Group

variant="boxed"

size="medium"

inverted

isMulti

Group

variant="boxed"

size="medium"

inverted

error

Group

variant="boxed"

size="medium"

inverted

error

isMulti

Group

variant="boxed"

size="small"

Group

variant="boxed"

size="small"

isMulti

Group

variant="boxed"

size="small"

error

Group

variant="boxed"

size="small"

error

isMulti

Group

variant="boxed"

size="small"

inverted

Group

variant="boxed"

size="small"

inverted

isMulti

Group

variant="boxed"

size="small"

inverted

error

Group

variant="boxed"

size="small"

inverted

error

isMulti

Group

variant="bottom-lined"

size="medium"

Group

variant="bottom-lined"

size="medium"

isMulti

Group

variant="bottom-lined"

size="medium"

error

Group

variant="bottom-lined"

size="medium"

error

isMulti

Group

variant="bottom-lined"

size="medium"

inverted

Group

variant="bottom-lined"

size="medium"

inverted

isMulti

Group

variant="bottom-lined"

size="medium"

inverted

error

Group

variant="bottom-lined"

size="medium"

inverted

error

isMulti

Group

variant="bottom-lined"

size="small"

Group

variant="bottom-lined"

size="small"

isMulti

Group

variant="bottom-lined"

size="small"

error

Group

variant="bottom-lined"

size="small"

error

isMulti

Group

variant="bottom-lined"

size="small"

inverted

Group

variant="bottom-lined"

size="small"

inverted

isMulti

Group

variant="bottom-lined"

size="small"

inverted

error

Group

variant="bottom-lined"

size="small"

inverted

error

isMulti

Group

Testing

Testing this natively using selectOptions from @testing-library/user-event is difficult as this is built on top of react-select, and so doesn't contain a native select element. You can test it easily using the react-select-event library like it's shown below (check here for more info)

import { render, within } from '@testing-library/react'
import selectEvent from 'react-select-event'
test('should select option', () => {
    const { queryByLabelText } = render(
        <Box aria-label="SearchList Container">
            <SelectList
                id="select-list-playground"
                label="City"
                onChange={(change) => console.log(change)}
                options={[
                    {
                        label: "Barcelona",
                        value: "bcn"
                    },
                    {
                        label: "Hamburg",
                        value: "ham"
                    },
                    {
                        label: "Paris",
                        value: "par"
                    }
                ]}
            />
        </Box>
    );
    const container = queryByLabelText(
        'SearchList Container',
    )
    const inputbox = within(
        container,
    ).queryByRole('textbox')
            
    // this will open the menu
    user.type(inputbox, 'Bar')
    // use react-select-event to select the option you want
    await selectEvent.select(container, ['Barcelona'])
});