Select

For making one selection from a large list of options.

If you need to fetch options for the select as the interacts with the select, please use the AsyncSelect.

options

[
        { value: "accepted", label: "Accepted" },
        { value: "assigned", label: "Assigned to a line" },
      ]

[
        { value: "accepted", label: "Accepted" },
        { value: "assigned", label: "Assigned to a line" },
      ]

autocomplete

maxHeight

multiselect

value

defaultValue

menuIsOpen

onMenuOpen

(e) => console.log('onMenuOpen', e)

(e) => console.log('onMenuOpen', e)

onMenuClose

(e) => console.log('onMenuClose', e)

(e) => console.log('onMenuClose', e)

onInputChange

(e) => console.log('onInputChange', e)

(e) => console.log('onInputChange', e)

noOptionsMessage

({ inputValue}) => `No options were found for: ${inputValue}`

({ inputValue}) => `No options were found for: ${inputValue}`

menuPosition

components

closeMenuOnSelect

import * as React from "react";
import { Select } from "@nulogy/components";

export default () => {
  return (
    <Select
      options={[
        { value: "accepted", label: "Accepted" },
        { value: "assigned", label: "Assigned to a line" }
      ]}
      onMenuOpen={e => console.log("onMenuOpen", e)}
      onMenuClose={e => console.log("onMenuClose", e)}
      onInputChange={e => console.log("onInputChange", e)}
      noOptionsMessage={({ inputValue }) =>
        `No options were found for: ${inputValue}`
      }
    />
  );
}

import * as React from "react";
import { Select } from "@nulogy/components";

export default () => {
  return (
    <Select
      options={[
        { value: "accepted", label: "Accepted" },
        { value: "assigned", label: "Assigned to a line" }
      ]}
      onMenuOpen={e => console.log("onMenuOpen", e)}
      onMenuClose={e => console.log("onMenuClose", e)}
      onInputChange={e => console.log("onInputChange", e)}
      noOptionsMessage={({ inputValue }) =>
        `No options were found for: ${inputValue}`
      }
    />
  );
}

Variations

MultiSelect

Give users the ability to select multiple options with the multiselect. Note that the value will now be represented as an Array rather than a string.

Replacing Inner Components

Using the components prop you can augment the inner components of the select. See the following example of adding a component to each option in the dropdown:

List of All Replaceable components

Here is a list of all the available components that can be overidden and customized

Object Key	Component Name	Description
Option	SelectOption	Individual options in the select's dropdown
Control	Control	Wraps the select field
MultiValue	SelectMultiValue	The selected options in a muliselect select
ClearIndicator	SelectClearIndicator	The clear button in the multiselect
SelectContainer	SelectContainer	The wrapper around the whole field and dropdown
Menu	SelectMenu	The wrapper around the dropdown options
Input	SelectInput	The typeable input in the select

Props

Name	Type	Default	Description
options	array	Required	The options available to be selected, containing a value and a label
autocomplete	boolean	true	Whether or not typing will filter the options list
maxHeight	string	256px	Max height of the select dropdown menu, content is scrollable
multiselect	boolean		Whether or not multiple selections can be made
value	string		Value of input, used when controlling the component, an array when using the multiselect
defaultValue	string		Default value of input, an array if multiselect
menuIsOpen	boolean		Controls whether the menu is open; If unset, then NDS controls this implicitly instead
onMenuOpen	function		Event handler for when the menu is opened
onMenuClose	function		Event handler for when the menu is closed
onInputChange	function		Event handler for when the value typed into the input changes
noOptionsMessage	function	No options	A function that returns the string you you like to show up when no options are available
menuPosition	string	absolute	The CSS position value of the menu. ex: 'fixed'
components	object		Pass in an object with the keys of the component you would like to replace
closeMenuOnSelect	boolean	true	Close the select menu when the user selects an option

Related Components

AsyncSelect