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
inputId	string Sets the id of the input field of the SelectList component

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

<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'])

});