IMultiSelectProps
interface IMultiSelectProps {
/**
* List of items to select from.
* Each option has a label which is displayed and a value which is what we actually select.
* also you can pass any object as options, then specify the labelField, valueField props
*/
options: IOption[] | any[],
/**
* Name of the field you want to display as label
* If not given default(label) will be used
*/
labelField?: string,
/**
* Name of the field you want to return as value
* If not given default(value) will be used
*/
valueField?: string,
/**
* Name if the field to use as icon
* if a value is passed icon will be displayed.
*/
iconField?: string
/**
* The currently selected value
*
* ['option1', 'option2']
*/
selected: string[],
/**
* Gets called whenever the selection changes.
* The value parameter has the newly selected value
* option parameter has the complete option/ object that you passed
*/
onChange: (values: string[], options?: IOption[] | any[]) => void,
/**
* Text to show when no value is selected
*/
placeholder?: string,
/**
* Any extra css classes to add to the component
*/
className?: string,
/**
* Set this to false to indicate the field doesn't have a valid value
*/
isValid?: boolean,
// inputAttr?: any
/**
* show hide end of content message
*/
showEndOfContent?: boolean
/**
* A function that will be responsible for rendering each individual option of the list.
*
* @example
*
* ```
* renderItem={(option,key)=><div>{option.label}</div>}
* ```
*
* @example
* ```
* renderItem={(option,key)=><ItemCard data={item} titleField='label' />}
* ```
*/
renderOption?: (item: any, key: number) => JSX.Element,
wrapSelectedItemsToOneLine?: boolean,
selectAllOnLoad?: boolean,
hideClearButton?: boolean
hideDoneButton?: boolean
}
Usage
import {IMultiSelectProps} from 'uxp/components';
Last updated