Async Select

For making one selection from a large list of options and fetching new options as the user types.

import { AsyncSelect } from "@nulogy/components";

const loadMatchingCountries = async inputValue => {
  const data = await fetch('https://restcountries.eu/rest/v2/name/inputValue');
  const results = await data.json();
  return results.map(({ name }) => ({
    label: name,
    value: name
  }));
};

<AsyncSelect
  loadOptions={loadMatchingCountries}
  labelText="Country"
/>

Variations

All variations from the Select component are available.

Props

NameTypeDefaultDescription

loadOptions

(inputValue: string) => ({label: string, value: string })

Event handler that is called when the input changes and should return a list of objects with the label and value of the fetched select options

defaultOptions

boolean || Array<{label: string, value: string}>

if true will fetch results when the input is focussed and display them, otherwise you can pass in a list of label and value objects to display until the user types

cacheOptions

boolean

false

If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.

autocomplete

Boolean

true

Whether or not typing will filter the options list

options

Array

Required

The options available to be selected, containing a value and a label

maxHeight

String

256px

Max height of the select dropdown menu, content is scrollable

multiselect

Boolean

false

Whether or not multiple selections can be made

value

String | Array

undefined

Value of input, used when controlling the component

defaultValue

String | Array

Default value of input

menuIsOpen

Boolean

undefined

Controls whether the menu is open; If unset, then NDS controls this implicitly instead

onMenuOpen

Function

undefined

Event handler for when the menu is opened

onMenuClose

Function

undefined

Event handler for when the menu is closed

onInputChange

Function

undefined

Event handler for when the value typed into the input changes

menuPosition

string

absolute

The CSS position value of the menu. ex: 'fixed'

components

Object<ComponentName: ReactNode>

undefined

Pass in an object with the keys of the component you would like to replace

noOptionsMessage

({ inputValue: string }) => string | null

No options

A function that returns the string you you like to show up when no options are available

closeMenuOnSelect

Boolean

true

Close the select menu when the user selects an option

id

String

null

A unique ID for this input

name

String

undefined

A unique name for this input

disabled

Boolean

false

Marks the field as disabled and disallows user input

helpText

Node

null

Placed below the label to provide assistance on how to fill out a field or the expected format. It can also provide an explanation of why the information is needed and how it will be used.

labelText

String

null

Informs users what the corresponding input field is for.

placeholder

String

null

A hint to the expected format for the field. Not a replacement for a label.

required

boolean

false

adds requirement text and asterisk to the label, NOTE: this does not behave like a required html input that blocks form submission when no value is entered, you must check the value of the select manually when submitting

requirementText

String

null

(Optional) or (Required).

className

String

undefined

className passed to the wrapper element.

onChange

Function

undefined

Change event handler that will be run whenever the value of the input is updated.

onBlur

Function

undefined

Change event handler that will be run whenever the input loses focus.

errorMessage

String

null

Displays an error message and applies red style

errorList

Array of Strings

null

Displays list of error messages and applies red style

Related components