Select

Selectable values

Individual option props to pass

Options container props to pass

Handler(event, value: any, name?, self) when selected value changes

Handler(event, value: any, name?: string, self) on select focus

Handler(event, value: any, name?: string, self) on select blur

Handler(event, value: any, name?: string, self) on input removal.

onChange handler will fire after with null as value, unless event.preventDefault().

To let onChange update form instance first before removing the field,

use setTimeout to execute code inside onRemove handler.

Handler(event, query: string, name?, self) when search input value changes

Handler(event, value: any, name?, self) when an option gets focus

Handler(event, value: any, name?, self) when a multiple selected value is clicked

Handler(self: object) when this component has mounted

Whether to allow users to add new options (in combination with search) Set to true to allow adding new term. Set to object of props to pass to new option object when selected. Set to function(query: string) => boolean | object for conditional logic.

Whether to use minimal width that fits content, pass number for additional character offset

Whether to lock selected value when value prop is given

Whether to open options initially

Whether to filter out selected value from options dropdown

Function(value, name?, self) => any - Serializer for internal Select state value

Function(value, name?, self, event) => any - Deserializer for onChange/onBlur/onFocus value

Select always stores the value or value[] internally for its logic, like fuzzy search

Function(query, name?, self, event) => string - search query normalizer to sanitize user input

Whether to always render options, even when closed

Custom Icon name or props to render before input node.

Default is 'dropdown' icon at the end, or 'search' icon at the start if search = true

and icons are undefined or null.

Custom Icon name or props to render after input node

Whether to allow multiple selections and store values as array

Whether to set options with position fixed on open to remain visible inside Scroll

Default search query to use

Function(query) => string - parse function for internal query string used for search

Whether to enable search by options, pass Handler(query, options) => value for custom search

Unique ID to trigger search options re-indexing

Fuzzy search options

Whether options menu should try to open from the top, default is from the bottom

Selected value(s) - if passed, becomes a controlled component

Function(value: any, index: number, array, self) => JSX - to render selected option.

Currently only works for multiple selections.

Message string to display when there are no options left for multiple select, or

Handler(self) => string - function to render message dynamically (example: using query)

Minimum number of Select options to use Virtual List renderer to optimize for performance