Components

Lookup Select

Design
Code

Let users choose one option from a long list by typing.

Lookup select works best with long, preloaded lists where the user will have a good idea of how to filter its contents.

Web
React Native
Android
Apple
Other
uiexpandregionvertical
<LookupSelect
  placeholder="Find an athlete"
  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' },
      ],
  },
};

customOption

func

Renders custom options in the options list of the select. Provided with each option object.

const customOption = {({ optionData }) =>
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <div style={{ paddingRight: '0.5rem' }}>
      <AvatarUser initials={optionData.initials} />
    </div>

    <div>
      <OptionTitle>
        {optionData.label}
      </OptionTitle>

      <OptionSubtitle>
        {optionData.description}
      </OptionSubtitle>
    </div>
  </div>
}

maxHeight

string
number

A string indicating the max height of the menu 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.

preserveSelectionOnBackspace

bool

Prevents the default behavior of clearing the selection on backspace if set to true.

showAllOptions

bool

Shows all of the options in the dropdown even after one has been selected, or is selected by default. If false, only the selected option will show when the user re-opens the dropdown.

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.

value

object
number
string

The value (option) selected.

defaultValue

object
number
string

The value (option) that is 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.

onChange

func

Responds to the select value changing. The corresponding object of the selected option is passed.

onSearchChange

func

Responds to the select input value changing. The value is passed back.

onMenuOpen

func

Responds when the select opens.

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.