New to KendoReact? Start a free 30-day trial

MultiSelectProps

Interface

Represents the props of the KendoReact MultiSelect component.

Properties

accessKey?

string

Specifies the accessKey of the MultiSelect.

Example:

jsx

<MultiSelect accessKey="a" />

adaptive?

boolean

Providing different rendering of the popup element based on the screen dimensions.

Default:

false

Example:

jsx

<MultiSelect adaptive={true} />

adaptiveFilter?

string

Sets the value of the adaptive filtering input of the of MultiSelect.

Example:

jsx

<MultiSelect adaptiveFilter="Option" />

adaptiveSubtitle?

string

Specifies the text that is rendered as subtitle in the adaptive popup(action sheet). Applicable only when adaptive is set to true.

Example:

jsx

<MultiSelect adaptiveSubtitle="Adaptive Popup Subtitle" />

adaptiveTitle?

string

Specifies the text that is rendered as title in the adaptive popup(action sheet). Applicable only when adaptive is set to true. If not provided, the title will be the same as the label.

Example:

jsx

<MultiSelect adaptiveTitle="Adaptive Popup Title" />

allowCustom?

boolean

Specifies whether the MultiSelect allows user-defined values that are not present in the dataset (see example). Defaults to false.

Example:

jsx

<MultiSelect allowCustom={true} />

ariaDescribedBy?

string

Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.

Example:

jsx

<MultiSelect ariaDescribedBy="description" />

ariaLabel?

string

Specifies the accessible label of the interactive component.

Example:

jsx

<MultiSelect ariaLabel="MultiSelect" />

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

Example:

jsx

<MultiSelect ariaLabelledBy="label" />

autoClose?

boolean

Determines whether to close the options list of the MultiSelect after the item selection is finished.

Example:

jsx

<MultiSelect autoClose={false} />

checkboxes?

boolean

Controls whether checkboxes are rendered in the select-all header and in each list item. The checkbox state reflects the selected state of the items.

Default:

false

Example:

jsx

<MultiSelect selectAll={true} checkboxes={true} />

className?

string

Sets additional classes to the MultiSelect.

Example:

jsx

<MultiSelect className="custom-class" />

data?

any[]

Sets the data of the MultiSelect (see example).

Example:

jsx

<MultiSelect data={['Option1', 'Option2', 'Option3']} />

dataItemKey?

string

Sets the key for comparing the data items of the MultiSelect (see example). If dataItemKey is not set, the MultiSelect compares the items by reference.

Example:

jsx

<MultiSelect dataItemKey="id" />

defaultValue?

any[]

Sets the default value of the MultiSelect. Similar to the native select HTML element.

Example:

jsx

<MultiSelect defaultValue={['Option1']} />

dir?

string

Represents the dir HTML attribute.

Example:

jsx

<MultiSelect dir="rtl" />

disabled?

boolean

Sets the disabled state of the MultiSelect.

Example:

jsx

<MultiSelect disabled={true} />

fillMode?

"solid" | "flat" | "outline"

Configures the fillMode of the MultiSelect.

The available options are:

solid
flat
outline

Default:

undefined (theme-controlled)

Example:

jsx

<MultiSelect fillMode="flat" />

filter?

string

Sets the value of filtering input. Useful for making the filtering input a controlled component.

Example:

jsx

<MultiSelect filter="Option" />

filterable?

boolean

Enables the filtering functionality of the MultiSelect (more information and examples).

Example:

jsx

<MultiSelect filterable={true} />

focusedItemIndex?

If set, the MultiSelect will use it to get the focused item index.

Default functionality returns the first item which starts with the input text.

Parameters:dataanyinputTextstringtextField?stringReturns:

number

Example:

jsx

const focusedItemIndex = (data, inputText, textField) => {
    let text = inputText.toLowerCase();
    return data.findIndex(item =>
        String(textField ? item[textField] : item).toLowerCase().includes(text));
};

<MultiSelect focusedItemIndex={focusedItemIndex} />

ReactNode

Sets the footer component of the MultiSelect (see example).

Example:

jsx

<MultiSelect footer={<div>Footer</div>} />

groupField?

string

Sets the data item field that represents the start of a group. Applicable to objects data.

Example:

jsx

<MultiSelect groupField="category" />

groupHeaderItemRender?

Fires when a DropDownList's group header item is about to be rendered. Used to override the default appearance of the group's headers.

Parameters:liReactElement<HTMLLIElement, string | JSXElementConstructor<any>>itemPropsListGroupItemPropsReturns:

ReactNode

Example:

jsx

<MultiSelect groupHeaderItemRender={(li, itemProps) => <div>{itemProps.dataItem}</div>} />

groupStickyHeaderItemRender?

Fires when a DropDownList's sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.

Parameters:divReactElement<HTMLDivElement, string | JSXElementConstructor<any>>stickyHeaderPropsGroupStickyHeaderPropsReturns:

ReactNode

Example:

jsx

<MultiSelect groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.dataItem}</div>} />

ReactNode

Sets the header component of the MultiSelect (see example).

Example:

jsx

<MultiSelect header={<div>Header</div>} />

id?

string

Specifies the id of the component.

Example:

jsx

<MultiSelect id="multi-select" />

inputAttributes?

InputHTMLAttributes<HTMLInputElement>

Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.

Example:

jsx

<MultiSelect inputAttributes={{ maxLength: 10 }} />

itemRender?

Fires when a MultiSelect item is about to be rendered (see example). Used to override the default appearance of the list items.

Parameters:liReactElement<HTMLLIElement, string | JSXElementConstructor<any>>itemPropsListItemPropsReturns:

ReactNode

Example:

jsx

<MultiSelect itemRender={(li, itemProps) => <div>{itemProps.dataItem}</div>} />

label?

string

Renders a floating label for the MultiSelect.

Example:

jsx

<MultiSelect label="Select an option" />

listNoDataRender?

Fires when the element which indicates no data in the popup is about to be rendered (see example). Used to override the default appearance of the element.

Parameters:elementReactElement<HTMLDivElement, string | JSXElementConstructor<any>>Returns:

ReactNode

Example:

jsx

<MultiSelect listNoDataRender={(element) => <div>No data available</div>} />

loading?

boolean

Sets the loading state of the MultiSelect (see example).

Example:

jsx

<MultiSelect loading={true} />

name?

string

Specifies the name property of the input DOM element.

This property is part of the FormComponentProps interface.

onBlur?

(event: MultiSelectBlurEvent) => void

Fires each time the MultiSelect gets blurred.

Parameters:eventMultiSelectBlurEvent

Example:

jsx

<MultiSelect onBlur={(event) => console.log(event)} />

onCancel?

(event: MultiSelectCancelEvent) => void

Fires each time the popup of the MultiSelect is about to cancel in (adaptive mode).

Parameters:eventMultiSelectCancelEvent

Example:

jsx

<MultiSelect onCancel={(event) => console.log(event)} />

onChange?

(event: MultiSelectChangeEvent) => void

Fires each time the value of the MultiSelect is about to change (see examples).

Parameters:eventMultiSelectChangeEvent

Example:

jsx

<MultiSelect onChange={(event) => console.log(event)} />

onClose?

(event: MultiSelectCloseEvent) => void

Fires each time the popup of the MultiSelect is about to close.

Parameters:eventMultiSelectCloseEvent

Example:

jsx

<MultiSelect onClose={(event) => console.log(event)} />

onFilterChange?

(event: MultiSelectFilterChangeEvent) => void

Fires each time the user types in the filter input (see example). You can filter the source based on the passed filtration value.

Parameters:eventMultiSelectFilterChangeEvent

Example:

jsx

<MultiSelect onFilterChange={(event) => console.log(event)} />

onFocus?

(event: MultiSelectFocusEvent) => void

Fires each time the user focuses the MultiSelect.

Parameters:eventMultiSelectFocusEvent

Example:

jsx

<MultiSelect onFocus={(event) => console.log(event)} />

onOpen?

(event: MultiSelectOpenEvent) => void

Fires each time the popup of the MultiSelect is about to open.

Parameters:eventMultiSelectOpenEvent

Example:

jsx

<MultiSelect onOpen={(event) => console.log(event)} />

onPageChange?

(event: MultiSelectPageChangeEvent) => void

Fires when both the virtual scrolling of the MultiSelect is enabled and when the component requires data for another page (see example).

Parameters:eventMultiSelectPageChangeEvent

Example:

jsx

<MultiSelect onPageChange={(event) => console.log(event)} />

onSelectAllChange?

(event: MultiSelectSelectAllChangeEvent) => void

Fires when the select-all item is clicked. When provided, the component delegates the select-all logic to the consumer. Useful for virtualization scenarios where the consumer manages the full dataset.

Parameters:eventMultiSelectSelectAllChangeEvent

Example:

jsx

<MultiSelect
    selectAll={true}
    onSelectAllChange={(event) => { setAllSelected(!allSelected); }}
/>

opened?

boolean

Sets the opened and closed state of the MultiSelect.

Example:

jsx

<MultiSelect opened={true} />

placeholder?

string

The hint that is displayed when the MultiSelect is empty.

Example:

jsx

<MultiSelect placeholder="Select an option" />

popupSettings?

DropDownsPopupSettings

Configures the popup of the MultiSelect.

Example:

jsx

<MultiSelect popupSettings={{ animate: true }} />

prefix?

CustomComponent<any>

Sets a custom prefix to the MultiSelect component.

Example:

jsx

<MultiSelect prefix={<span>Prefix</span>} />

required?

boolean

Specifies if null is a valid value for the component.

This property is part of the FormComponentProps interface.

rounded?

"small" | "medium" | "large" | "full" | "none"

Configures the roundness of the MultiSelect.

The available options are:

small
medium
large
full

Default:

undefined (theme-controlled)

Example:

jsx

<MultiSelect rounded="large" />

selectAll?

boolean

Controls whether a built-in Select all option appears at the top of the popup list. Selecting this option toggles all currently applicable items.

Default:

false

Example:

jsx

<MultiSelect selectAll={true} />

size?

"small" | "medium" | "large"

Configures the size of the MultiSelect.

The available options are:

small
medium
large

Default:

undefined (theme-controlled)

Example:

jsx

<MultiSelect size="small" />

skipDisabledItems?

boolean

Defines if MultiSelect's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to true.

Example:

jsx

<MultiSelect skipDisabledItems={false} />

style?

CSSProperties

The styles that are applied to the MultiSelect.

Example:

jsx

<MultiSelect style={{ width: '300px' }} />

suffix?

CustomComponent<any>

Sets a custom suffix to the MultiSelect component.

Example:

jsx

<MultiSelect suffix={<span>Suffix</span>} />

summarizeAfter?

number

Specifies the maximum number of individual tag chips to display before showing a summary tag. When the number of selected items exceeds this value, the first summarizeAfter items are shown as individual chips and the remaining items are collapsed into a summary chip.

Default:

Example:

jsx

<MultiSelect summarizeAfter={5} />

tabIndex?

number

Specifies the tabIndex of the MultiSelect.

Example:

jsx

<MultiSelect tabIndex={0} />

tagRender?

Fires when a tag element is about to be rendered (see example). Used to override the default appearance of the element.

Parameters:tagDataTagDatatagReactElement<any, string | JSXElementConstructor<any>>Returns:

ReactElement<any, string | JSXElementConstructor<any>>

Example:

jsx

<MultiSelect tagRender={(tagData, tag) => <span>{tagData.text}</span>} />

tags?

TagData[]

Sets the tags of the MultiSelect (see example).

Example:

jsx

<MultiSelect tags={[{ text: 'Tag1' }, { text: 'Tag2' }]} />

textField?

string

Sets the data item field that represents the item text (see example). If the data contains only primitive values, do not define it.

Example:

jsx

<MultiSelect textField="name" />

valid?

boolean

Overrides the validity state of the component. If valid is set, the required property will be ignored.

This property is part of the FormComponentProps interface.

validationMessage?

string

Controls the form error message of the component. If set to an empty string, no error will be thrown.

This property is part of the FormComponentProps interface.

validityStyles?

boolean

If set to false, no visual representation of the invalid state of the component will be applied.

This property is part of the FormComponentProps interface.

value?

any[]

Sets the value of the MultiSelect (see example). It can either be of the primitive (string, numbers) or of the complex (objects) type.

Example:

jsx

<MultiSelect value={['Option1', 'Option2']} />

virtual?

VirtualizationSettings

Configures the virtual scrolling of the MultiSelect (see example).

Example:

jsx

<MultiSelect virtual={{ pageSize: 20 }} />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.