SelectInput

Use the <SelectInput /> component when the user needs to choose one or multiple options from a large group of options.

Show codeCopy code

Disabling the select input can be done via the <Field /> wrapper component or directly on the input's disabled prop.

Show codeCopy code

The input supports two sizes, small and medium (default). Prefer using size consistently with other form controls (a button e.g.) that support the same sizes.

Show codeCopy code

Used to separate items into appropriate sections. A divider is also included between each section.

Show codeCopy code

An icon can be used as an adornment in the select input.

Pass in the icon component via the icon prop. The select input only supports icon placement on the left side of the input.

Show codeCopy code

The SelectInput can take both static and dynamic lists of items. For example, you can pass an unresolved promise from a HTTP request and the select input will handle loading states while it awaits the async items. Once the promise resolves the items will render.

Show codeCopy code

To customise or add more information to the item label, you can pass in any other component via itemOverride. The props available to your custom component include:

• hasValue
• isDisabled
• isFocused
• label
• value

Set itemOverrideCheckIcon prop to true if you need the check icon to display on selected item(s).

Show codeCopy code

The <SelectInput /> component can also be used for multiple options selection by passing in the isMulti prop. Instead of using the onChange prop, use onChangeMulti to handle the selected items. The value prop should be an array of selected items.

Show codeCopy code

The limit prop is used to visually limit the number of selected items in the input. When the limit is reached, a tag with the text of + X more will be displayed.

NOTE: This is purely a UI change. The values will be the same as the selected items.

Show codeCopy code

A creatable select input is typically used when you want to provide users with the option to select from a predefined set of values, but also allow them to create a new option if the desired value is not available in the predefined list.

Use the isCreatable prop on either a single- or multi-select to enable this functionality.

Show codeCopy code

Creatable select inputs can also take dynamic lists of items, and creatable options can be selected while the list is being fetched. It is recommended to implement a process in which, upon the selection of items, a separate task fetches the corresponding item from the data source.

To demonstrate this functionality, below is a creatable <SelectInput /> and a list of users.

• As you type in the input field and upon selecting the creatable option, Promises will be initiated to simulate fetching.
• Notice that even while the Promise is still resolving, you can select and interact with the chosen name as if it were already fetched.
• Quickly enter a name, e.g. Jane Brown, and select Add "Jane Brown" from the list within 3 seconds and wait for the Promise to resolve to see this in action.

Show codeCopy code

To set constraints on acceptable values, define an isValidNewOption function. This function checks input values to decide if they can be shown as an option.

In the example below, an option is only creatable if it's typed in a valid email format.

Show codeCopy code