Select

For making one selection from a large list of options.

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

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

<Select
  options={ options }
  id="inventory-status"
  labelText="Inventory status"
/>

Use when

  • Users need to choose a single option from a list of mutually exclusive options.
  • There is a large data set that would be impractical for radio buttons or a toggle.

Variations

Disabled

<Select
  labelText="Label"
  placeholder="Please select inventory status"
  options={ options }
  id="disabled"
  disabled
/>

Error

Select...

Please select an inventory status

<Select
  options={ options }
  id="error"
  errorMessage="Please select an inventory status"
/>

Multiselect

Select...
<Select
  options={ options }
  id="multiselect"
  multiselect
/>

With all labels

<Select
  labelText="Label"
  requirementText="(Optional)"
  helpText="Additional help text"
  placeholder="Please select inventory status"
  options={ options }
  id="all-labels"
/>

Props

NameTypeDefaultDescription

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'

windowThreshold

number

300

The number of option at which to use virtualization to improve performance of the select

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

Makes the field require selection before the form will submit.

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 list of error messages and applies red style

errorList

Array of Strings

null

Displays list of error messages and applies red style

Related components