Skip to main content

Basic Functionality

In this section we will cover the base functionality of the component, mostly focusing on its value and options states

Value​

The value of the Select component holds an array of either a single element or multiple elements. By default the value array will hold only one value, but that can be easily changed via the isMulti prop.

Here are the default behaviours for both the single and multi value components.

BehaviourSingle Value SelectMulti Value Select
Close dropdown on select
✅
❌
Clear input on select
✅
❌
Will get cleared on input change
✅
❌

Single Value​

    Please select a value

Multi Value​

    Please select a value

Options​

The options of the select list can be filtered by the input value of the component if the hasInput prop is set to true. Additionaly they can be filtered by a custom optionFilter prop and sorted with a sortFunction prop.

We will showcase these functionalities in the following examples.

Select Input Filter​

Debounce Input Update
    Please select a value

Select Custom Filter​

Filter by Fruit
Filter by Vegetables
Sort A-Z
    Please select a value

Select Paging​

The option list can also be paginated by providing the recordsPerPage prop. This will enable infiniteScroll and control the amount of options rendered in the list.

    Please select a value

Categorized Options Example​

The select options can either be rendered as a regular list or they can be categorized by a property of the option state object. In order to enable the categorization feature, you need to pass the isCategorized prop as true, and also provide a categoryKey prop.

    Please select a value