Components

Lookup Multi-Select

Design
Code

Let users choose multiple items from the same lookup.

Multi-select should only be used when all items can be affected by the same action. To only allow for a single selection from the larger list, try lookup instead.

Web
React Native
Android
Apple
Other
uiexpandregionvertical
<LookupMultiSelect
  placeholder="Select your athletes"
  options={[
    { label: 'Kareem Abdul-Jabbar', value: 'kareem' },
    { label: 'Marv Albert', value: 'marv' },
    { label: 'Al Attles', value: 'al' },
  ]}
  id="athlete-select"
/>

Props

disabled

bool

Determines whether the select is disabled.

hasError

bool

Determines whether to show an error state (red text and border) on the input.

label

string

The text that appears above the select.

hideLabel

bool

Determines whether to hide the label.

required

bool

Determines whether the required text appears next to the label.

placeholder

string

Placeholder text of the select component when an option isn't selected.

options

array of Options
one OptionGroup

List of options or option groups to be displayed in the menu.

const options = [
  { label: 'Kareem Abdul-Jabbar', value: 'kareem' },
  { label: 'Marv Albert', value: 'marv' },
  { label: 'Al Attles', value: 'al' },
];
const groupOptions = {
  group1: {
    label: 'Offense',
    options: [
      { label: 'Kareem Abdul-Jabbar', value: 'kareem' },
      { label: 'Marv Albert', value: 'marv' },
    ],
  },
  group2: {
    label: 'Defense',
    options: [
      { label: 'Elgin Baylor', value: 'elgin' },
      { label: 'Dave Bing', value: 'dave' },
      ],
  },
};

maxHeight

string
number

A string indicating the max height of the menu represented as a CSS value, e.g., 100px, 5rem.

maxInputHeight

string
number

A string indicating the max height of the input represented as a CSS value, e.g., 100px, 5rem.

noMatchingResultsText

any

The translated text shown when no results are found. If no translated text is provided, "No matching results" will display, by default.

helpText

string

The text that appears below the select, usually instructing the user on what to provide.

matchHead

bool

If true, when typing, the select will only include options where the input value matches the beginning of the option label string. Defaults to false.

id

string

Id string that applies to most child elements.

name

string

Assigned to the hidden input's name attribute if the select is used as an uncontrolled component.

values

arrayOf
object
number
string

The values (options) selected.

defaultValues

arrayOf
object
number
string

The values (options) that are initially displayed on page load.

qaId

string

A unique string that appears as a data attribute in the rendered code, serving as a hook for automated tests.

onAddItem

func

Responds to an item being added.

onRemoveItem

func

Responds to an item being removed.

onRemoveAllItems

func

Responds to all items being removed by the dismiss button.

onMenuOpen

func

Responds when the select opens.

setInputRef

func

A ref passed into the input.

Notes

  • This can act as a controlled or uncontrolled component.
    • When a value prop is provided, it should show the currently selected value managed by an external state. That state is managed by the onChange prop.
    • If used as an uncontrolled component, a hidden input is rendered, set to the selected item's value. The hidden input's name attribute is set to the name prop provided.
  • To show an error message, simply pass in hasError and put the error text in the helpText attribute.