Custom Tags

The MultiSelect enables you to customize the display of the selected tags.

To customize the MultiSelect tags, use the tags property.

The following example demonstrates how to display a single summary tag.

import React from 'react';
import ReactDOM from 'react-dom';
import { MultiSelect } from '@progress/kendo-react-dropdowns';

const sizes = [ "X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large" ];

class AppComponent extends React.Component {
    state = { value: [] };

    handleChange = (event) => {
        this.setState({
            value: event.target.value
        });
    }

    render() {
        const value = this.state.value;
        const selected = value.length;
        return (
            <div>
                <div>T-shirt sizes:</div>
                <MultiSelect
                    data={sizes}
                    value={value}
                    onChange={this.handleChange}
                    tags={selected > 0 ?
                        [ { text: `${selected} items selected`, data: [ ...value ] } ] : []
                    }
                />
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

In this article

 /