Select

Select components are used for collecting user provided information from a list of options.

Basic usage

import { Select } from '@streamelements/frontend-ui';

export function MySelect() {
  return <Select options={[{ label: 'Option', value: 'option' }]}/>
}

Select

Select is available in browser only mode

Advanced

Select is available in browser only mode

Props

Select is based on the react-select library, So the entire props can be found Here

Name	Type	Default value	Description
options*	Option[]	[]	type Option =
autoFocus	boolean	false	Focus on mount
backspaceRemovesValue	boolean	true	Remove the currently focused option when the user presses backspace. Applicable when isClearable or isMulti is set to true
closeMenuOnSelect	boolean	true	Close the select menu when the user selects an option
delimiter	string	–	Delimiter used to join multiple values into a single HTML input value
escapeClearsValue	boolean	false	Clear values when the menu is closed and Escape is pressed
filterOption	Function	–	Custom option filtering methodSignature: f( option: { label: string; value: string }, value: string ): boolean
hideSelectedOptions	boolean	false	Hide selected option from list of options
inputValue*	string	""	The value of the search input
inputId*	string	–	The id of the search input
isClearable	boolean	false	When true, displays an X button to clear the value
isDisabled	boolean	false	When true, prevents user interaction with the select
isLoading	boolean	false	When true, displays a loading indicator on the field
isMulti	boolean	false	When true, allows for multiple options to be selected
isSearchable	boolean	true	When true, allows for searching through the provided items
menuPlacement	oneof "auto" | "bottom" | "top"	auto	The placement of the menu in relation to the control. "auto" will flip when there isn't enough space below the control.
value	Object | Object[]	–	Current value
onChange	Function	–	Change event handler Signature: See detailed types f( Object | Object[] | null | undefined ): void
onFocus	Function	–	React.FocusEventHandler<HTMLInputElement>

See the rest of the available props