Multi Select

The MultiSelect wrapper component can be used when an input supports combining multiple values in a single form field with a dropdown list of options to select from. The component is a complete form control supporting labels, errors and disabled states.

  • Install
    npm install @pluralsight/ps-design-system-multiselect
  • Import
    import MultiSelect from '@pluralsight/ps-design-system-multiselect'

Examples

import React from 'react'
import MultiSelect, { Option } from '@pluralsight/ps-design-system-multiselect'
const Comp = () => {
const options = useMemo(() => [
{ label: 'Hydrogen', value: 'H' },
{ label: 'Helium', value: 'He' },
{ label: 'Lithium', value: 'Li' },
{ label: 'Beryllium', value: 'Be' },
{ label: 'Boron', value: 'B' },
{ label: 'Carbon', value: 'C' },
{ label: 'Nitrogren', value: 'N' },
{ label: 'Oxygen', value: 'O' },
{ label: 'Fluorine', value: 'F' },
{ label: 'Neon', value: 'Ne' },
{ label: 'Sodium', value: 'Na' },
{ label: 'Magnesium', value: 'Mg' },
{ label: 'Aluminum', value: 'Al' },
{ label: 'Silicon', value: 'Si' },
{ label: 'Phosphorus', value: 'P' },
], [])
const [value, setValue] = useState<Option[]>(options.slice(0, 2))
return (
<MultiSelect
onChange={(_, nextValue) => {
setValue(nextValue)
}}
options={options}
value={value}
/>
)
}
export default Comp

Labels

import React from 'react'
import MultiSelect from '@pluralsight/ps-design-system-multiselect'
const noop = () => {}
const Comp = () => (
<div className="example-flex-column">
<MultiSelect
onChange={noop}
options={[{ label: 'tag', value: 'tag'}]}
placeholder="Enter tags"
value={[]}
/>
<MultiSelect
label="Label area"
onChange={noop}
options={[{ label: 'tag', value: 'tag'}]}
subLabel="Hint text displayed here"
value={[]}
/>
<MultiSelect
label={<MultiSelect.Label>ReactNode label</MultiSelect.Label>}
onChange={noop}
options={[{ label: 'tag', value: 'tag'}]}
subLabel={<MultiSelect.SubLabel>ReactNode sublabel</MultiSelect.SubLabel>}
value={[]}
/>
</div>
)
export default Comp

Prefix

import React from 'react'
import { SearchIcon } from '@pluralsight/ps-design-system-icon'
import MultiSelect from '@pluralsight/ps-design-system-multiselect'
const noop = () => {}
const Comp = () => (
<div className="example-flex-column">
<MultiSelect
label="Input with prefix"
onChange={noop}
options={[{ label: 'tag', value: 'tag'}]}
prefix={<SearchIcon />}
value={[]}
/>
</div>
)
export default Comp

Disabled

import React from 'react'
import MultiSelect from '@pluralsight/ps-design-system-multiselect'
const noop = () => {}
const Comp = () => (
<div className="example-flex-column">
<MultiSelect
disabled
label="Disabled input"
onChange={noop}
options={[{ label: 'tag', value: 'tag'}]}
value={[]}
/>
</div>
)
export default Comp

Error

import React from 'react'
import MultiSelect from '@pluralsight/ps-design-system-multiselect'
const noop = () => {}
const Comp = () => (
<div className="example-flex-column">
<MultiSelect
error
label="Error input"
onChange={noop}
options={[{ label: 'tag', value: 'tag'}]}
value={[]}
/>
</div>
)
export default Comp

Advanced customization

The MultiSelect component is a convenience wrapper for common usecases. If you need advanced customization, please explore building your own wrapper using the Field and Tag components.

Props

Name
Type
Description
Default
disabledboolean
errorboolean
labelstring | ReactNode
filterFn(term: string, options: Option[]) => Option[]custom filtering function
onChange
Required
(evt, nexValue: Option[]) => void
options
Required
Option[]
placeholderstringin-field usage hint
renderInputTag(props, ref) => ReactNoderender prop used to replace the default input(props, ref) => <input ref={ref} {...props} />
subLabelstring | ReactNode
value
Required
Option[]