Select

A select control to select one item from a list of multiple items

Installation

import { Select } from 'uxp/components';

Signature

const Select: React.MemoExoticComponent<React.FunctionComponent<ISelectProps>>

Examples

// options
 let [selectedOption, setSelectedOption] = React.useState<string>(null)
 let options = [
     {label: "Sri Lanka", value: "SL"},
     {label: "India", value: "IN"},
     {label: "United State", value: "US"},
 ]

 <Select
     options={options}
     selected={selectedOption}
     onChange={(newValue, option) => {
         setSelectedOption(value)
     }}
 />

// options
 let [selectedOption, setSelectedOption] = React.useState<string>(null)
 let options = [
     {name: "Sri Lanka", code: "SL"},
     {name: "India", code: "IN"},
     {name: "United State", code: "US"},
 ]

 <Select
     options={options}
     labelField="name"
     valueField="code"
     selected={selectedOption}
     onChange={(newValue, option) => {
         setSelectedOption(value)
     }}
 />

Properties

Name	Type	Mandatory	Default Value	Example Value
options	IOption[] | any[] | IDataFunction	Yes	-	-
labelField	string	No	-	-
valueField	string	No	-	-
iconField	string	No	-	-
selected	string	Yes	-	-
selectedLabel	string | ((selected: string) => Promise)	No	-	-
onChange	(value: string, option?: IOption | any) => void	Yes	-	-
placeholder	string	No	-	-
className	string	No	-	-
isValid	boolean	No	-	-
showEndOfContent	boolean	No	-	-
renderOption	(item: any, key: number) => JSX.Element	No	-	*
addNewValues	{ enable: boolean, title: string, loadingTitle: string, onAddNewValue?: (value: string) => Promise }	No	-	-
dropdownClassname	string	No	-	-
spacingMode	SpacingMode	No	-	-
onClear	() => void	No	-	-
renderCustomDropdownContent	(closeDropdown: () => void) => React.ReactNode	No	-	-
renderPlaceholder	{ /** * render input as a pill * work with default select dropdown / renderAsPill?: { minWidth?: number, maxWidth?: number }, /* * for custom renders */ renderCustomPill?: (onClear: () => void) => React.ReactNode }	No	-	-
dropdownMinWidth	number	No	-	-
dropdownMinHeight	number	No	-	-
pageSize	number	No	-	-

Related Types

• ISelectProps

• IOption

• IDataFunction

• SpacingMode