SelectList

Properties

NameTypeDefault
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

Select...

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