UXP
v2.0.0
v2.0.0
  • Introduction
    • Welcome
    • Understanding the Portal
    • Getting Started
  • Releases
  • Interface Types
    • Widgets
  • Interface Guidelines
    • Lists
  • Interacting with Lucy
    • Real-Time Communication
  • Interface Guidelines
  • Custom Styles and CSS
  • Publishing your UIs
    • Bundles
  • lucy-xp
  • Components
    • AsyncButton
    • AutoCompleteInput
    • BarChartLoader
    • Button
    • CRUDComponent
    • CalendarComponent
    • Checkbox
    • ColorPallet
    • ColorPicker
    • ConfirmButton
    • DataGrid
    • DataList
    • DataTable
    • DatePicker
    • DateRangePicker
    • DateTimePicker
    • DefaultLoader
    • DonutChartLoader
    • DropDownButton
    • DynamicForm
    • DynamicSelect
    • FileInput
    • FilterPanel
    • FormFeedback
    • FormField
    • GaugeLoader
    • HeatmapChartLoader
    • HorizontalScrollList
    • IconButton
    • Input
    • ItemCard
    • ItemListCard
    • Label
    • LinkButtonWidget
    • LinkWidgetContainer
    • Loading
    • LoadingSpinner
    • LocalizationForm
    • LocalizationFormModal
    • MapComponent
    • Modal
    • ModalWizard
    • MultiSelect
    • NotificationBlock
    • PieChartComponent
    • Popover
    • PortalContainer
    • ProfileImage
    • RadialGauge
    • SampleDataLabel
    • SearchBox
    • Select
    • SideBar
    • SpaceworxDescriptionTag
    • TabComponent
    • TableComponent
    • TextArea
    • ThemeChanger
    • TimePicker
    • TimeRangePicker
    • TitleBar
    • ToggleFilter
    • Tooltip
    • TreeViewSelectInput
    • TrendChartComponent
    • UserProfile
    • WidgetContainerBlock
    • WidgetWrapper
    • Wizard
  • Hooks
    • useAlert
    • useDebounce
    • useEffectWithPolling
    • useEventSubscriber
    • useFields
    • useMessageBus
    • useResizeEffect
    • useToast
    • useUpdateWidgetProps
  • Types
    • ActionResponse
    • CRUDComponentInstanceProps
    • CRUDComponentProps
    • Column
    • DynamicFormFieldProps
    • DynamicFormProps
    • ExtendedFormProps
    • FieldsHook
    • FormProps
    • FormSectionProps
    • FormValue
    • IAlertResult
    • IAnimation
    • IAutoCompleteInputInstanceProps
    • IButtonSize
    • IButtonType
    • IBuyOnSpaceworxButtonProps
    • ICalendarComponentProps
    • ICallback
    • ICheckboxInstanceProps
    • ICheckboxType
    • ICircleBound
    • IColorPalletProps
    • IColorPickerPosition
    • IColorPickerProps
    • IColorTypes
    • IContentFunction
    • IDataFunction
    • IDataItem
    • IDataTableColumn
    • IDatePickerProps
    • IDateRangePickerProps
    • IDateTimePickerProps
    • IDivIconInterface
    • IDropDownButtonPosition
    • IDropDownButtonProps
    • IDynamicSelectDataFunction
    • IEventDispatcher
    • IEventSubscriber
    • IFileInputInstanceProps
    • IFileInputProps
    • IGaugeProps
    • IHeatmapConfiguration
    • IHeatmapPoint
    • IInputInstanceProps
    • IInputType
    • ILanguage
    • ILocalisationFormModalInstanceProps
    • ILocalisationFormModalProps
    • ILocalisationFormProps
    • IMarker
    • IMessage
    • IModalWizardProps
    • IModalWizardStep
    • IModalWizardStepProps
    • IMultiSelectProps
    • IPolygonBound
    • IPopoverPosition
    • IPopoverProps
    • IPortalContainerProps
    • IPosition
    • IPreviewDetails
    • IProfileProps
    • IRegion
    • IRemove
    • IRenderMarkerPopup
    • IRenderMarkerTooltip
    • ISampleDataLabelProps
    • ISearchBoxInstanceProps
    • ISelectProps
    • ISidebarProps
    • ISize
    • ISpaceworxDescriptionTagProps
    • IStaticImage
    • ITextAreaInstanceProps
    • IThemeChangerProps
    • ITitleFunc
    • IToast
    • IToastResult
    • IToggleOption
    • ITooltipPosition
    • ITooltipProps
    • IUseEffectWithPolling
    • IUseUpdateWidgetProps
    • IWidgetContainerBlockProps
    • IWidgetPreloaderLoaderProps
    • IWidgetWrapperProps
    • IWizardStep
    • IWizardStepProps
    • ListProps
    • MessageBusHook
    • PaginationProps
    • RenderCustomFormView
    • ResizeEffectHook
    • TabComponentProps
    • TabComponentStyles
    • TableComponentProps
    • ToastHook
    • TreeViewSelectInputInstanceProps
    • TreeViewSelectInputProps
    • regionType
Powered by GitBook
On this page
  1. Types

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

    dropdownClassname?: string

    spacingMode?: SpacingMode
}

Usage

import {IMultiSelectProps} from 'uxp/components';
PreviousIModalWizardStepPropsNextIPolygonBound

Last updated 3 months ago