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
`disabled`	`boolean`
`error`	`boolean`
`label`	`string \| ReactNode`
`filterFn`	`(term: string, options: Option[]) => Option[]`	custom filtering function
`onChange` Required	`(evt, nexValue: Option[]) => void`
`options` Required	`Option[]`
`placeholder`	`string`	in-field usage hint
`renderInputTag`	`(props, ref) => ReactNode`	render prop used to replace the default input	`(props, ref) => <input ref={ref} {...props} />`
`subLabel`	`string \| ReactNode`
`value` Required	`Option[]`