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
Combinations
variant="boxed"
size="medium"
variant="boxed"
size="medium"
isMulti
variant="boxed"
size="medium"
error
variant="boxed"
size="medium"
error
isMulti
variant="boxed"
size="medium"
inverted
variant="boxed"
size="medium"
inverted
isMulti
variant="boxed"
size="medium"
inverted
error
variant="boxed"
size="medium"
inverted
error
isMulti
variant="boxed"
size="small"
variant="boxed"
size="small"
isMulti
variant="boxed"
size="small"
error
variant="boxed"
size="small"
error
isMulti
variant="boxed"
size="small"
inverted
variant="boxed"
size="small"
inverted
isMulti
variant="boxed"
size="small"
inverted
error
variant="boxed"
size="small"
inverted
error
isMulti
variant="bottom-lined"
size="medium"
variant="bottom-lined"
size="medium"
isMulti
variant="bottom-lined"
size="medium"
error
variant="bottom-lined"
size="medium"
error
isMulti
variant="bottom-lined"
size="medium"
inverted
variant="bottom-lined"
size="medium"
inverted
isMulti
variant="bottom-lined"
size="medium"
inverted
error
variant="bottom-lined"
size="medium"
inverted
error
isMulti
variant="bottom-lined"
size="small"
variant="bottom-lined"
size="small"
isMulti
variant="bottom-lined"
size="small"
error
variant="bottom-lined"
size="small"
error
isMulti
variant="bottom-lined"
size="small"
inverted
variant="bottom-lined"
size="small"
inverted
isMulti
variant="bottom-lined"
size="small"
inverted
error
variant="bottom-lined"
size="small"
inverted
error
isMulti
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"><SelectListid="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 menuuser.type(inputbox, 'Bar')// use react-select-event to select the option you wantawait selectEvent.select(container, ['Barcelona'])});