Chip Customization in React MultiSelect Dropdown

The React MultiSelect provides chip customization through the tagging event. Within this event, you can apply custom CSS classes to chip elements by calling the setClass method exposed on the TaggingEventArgs event argument.

Event arguments

The tagging event passes a TaggingEventArgs object with the following useful members:

Property / Method Type Description
itemData Object The data object of the list item being tagged.
item Element The list item element being tagged.
isInteracted boolean Indicates whether the tag was added through user interaction.
cancel boolean When set to true, cancels the tagging of the current item.
setClass(classNames: string): void method Applies the specified CSS class name(s) to the chip element. Return value: void.

Apply a CSS class

Follow these steps to apply a custom CSS class to each chip:

  1. Define the data source. Bind an array of objects to the dataSource property and map the display and value columns via the fields property.
  2. Wire the tagging event. In the handler, read the selected item’s text from e.itemData and pass the desired class name to e.setClass().
  3. Define the corresponding styles. Add CSS rules for the class names you pass to setClass so the chips are visually styled (for example, a background color per item).
  4. Render the component. Set the tagging event on the React MultiSelect so the handler is invoked for every chip.

The following inline example shows the tagging handler that applies the color name as a CSS class to each chip:

onTagging = (e) => {
    // set the current selected item text as class to chip element.
    e.setClass(e.itemData[this.fields.text].toLowerCase());
};

The class names passed to setClass (for example, chocolate, darkorange) must be defined in your application’s CSS so the chips take on the intended visual style. The complete sample below includes the matching CSS rules.

The following sample demonstrates chip customization with the React MultiSelect component. Both the class-based and functional component patterns are shown; either approach is valid, so choose the one that matches your project style.

[Class-component]

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    // define the JSON of data
    colorsData = [
        { Color: 'Chocolate', Code: '#75523C' },
        { Color: 'CadetBlue', Code: '#3B8289' },
        { Color: 'DarkOrange', Code: '#FF843D' },
        { Color: 'DarkRed', Code: '#CA3832' },
        { Color: 'Fuchsia', Code: '#D44FA3' },
        { Color: 'HotPink', Code: '#F23F82' },
        { Color: 'Indigo', Code: '#2F5D81' },
        { Color: 'LimeGreen', Code: '#4CD242' },
        { Color: 'OrangeRed', Code: '#FE2A00' },
        { Color: 'Tomato', Code: '#FF745C' }
    ];
    // maps the appropriate column to fields property
    fields = { text: 'Color', value: 'Code' };
    // set the value to MultiSelect
    colorValues = ['#75523C', '#4CD242', '#FF745C'];
    // bind the tagging event
    onTagging = (e) => {
        // set the current selected item text as class to chip element.
        e.setClass(e.itemData[this.fields.text].toLowerCase());
    };
    render() {
        return (<MultiSelectComponent id="chip-customization" value={this.colorValues} dataSource={this.colorsData} fields={this.fields} mode="Box" placeholder="Favorite Colors" tagging={this.onTagging = this.onTagging.bind(this)}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MultiSelectComponent, TaggingEventArgs } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
  // define the JSON of data
  private colorsData: { [key: string]: Object }[] =[
    { Color: 'Chocolate', Code: '#75523C' },
    { Color: 'CadetBlue', Code: '#3B8289' },
    { Color: 'DarkOrange', Code: '#FF843D' },
    { Color: 'DarkRed', Code: '#CA3832' },
    { Color: 'Fuchsia', Code: '#D44FA3' },
    { Color: 'HotPink', Code: '#F23F82' },
    { Color: 'Indigo', Code: '#2F5D81' },
    { Color: 'LimeGreen', Code: '#4CD242' },
    { Color: 'OrangeRed', Code: '#FE2A00' },
    { Color: 'Tomato', Code: '#FF745C' }
];
  // maps the appropriate column to fields property
  private fields: { [key: string]: string } = { text: 'Color', value: 'Code' };
  // set the value to MultiSelect
  private colorValues: string[] = ['#75523C', '#4CD242', '#FF745C'];
  // bind the tagging event
  public onTagging = (e: TaggingEventArgs) => {
    // set the current selected item text as class to chip element.
    e.setClass((e.itemData as any)[this.fields.text].toLowerCase());
  }
  public render() {
    return (
            <MultiSelectComponent id="chip-customization" value={this.colorValues} dataSource={this.colorsData} fields={this.fields} mode="Box" placeholder="Favorite Colors" tagging={this.onTagging = this.onTagging.bind(this)} />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // define the JSON of data
    const colorsData = [
        { Color: 'Chocolate', Code: '#75523C' },
        { Color: 'CadetBlue', Code: '#3B8289' },
        { Color: 'DarkOrange', Code: '#FF843D' },
        { Color: 'DarkRed', Code: '#CA3832' },
        { Color: 'Fuchsia', Code: '#D44FA3' },
        { Color: 'HotPink', Code: '#F23F82' },
        { Color: 'Indigo', Code: '#2F5D81' },
        { Color: 'LimeGreen', Code: '#4CD242' },
        { Color: 'OrangeRed', Code: '#FE2A00' },
        { Color: 'Tomato', Code: '#FF745C' }
    ];
    // maps the appropriate column to fields property
    const fields = { text: 'Color', value: 'Code' };
    // set the value to MultiSelect
    const colorValues = ['#75523C', '#4CD242', '#FF745C'];
    // bind the tagging event
    function onTagging() { }
    (e) => {
        // set the current selected item text as class to chip element.
        e.setClass(e.itemData[this.fields.text].toLowerCase());
    };
    return (<MultiSelectComponent id="chip-customization" value={colorValues} dataSource={colorsData} fields={fields} mode="Box" placeholder="Favorite Colors" tagging={onTagging = onTagging.bind(this)}/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MultiSelectComponent, TaggingEventArgs } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  // define the JSON of data
  const colorsData: { [key: string]: Object }[] =[
    { Color: 'Chocolate', Code: '#75523C' },
    { Color: 'CadetBlue', Code: '#3B8289' },
    { Color: 'DarkOrange', Code: '#FF843D' },
    { Color: 'DarkRed', Code: '#CA3832' },
    { Color: 'Fuchsia', Code: '#D44FA3' },
    { Color: 'HotPink', Code: '#F23F82' },
    { Color: 'Indigo', Code: '#2F5D81' },
    { Color: 'LimeGreen', Code: '#4CD242' },
    { Color: 'OrangeRed', Code: '#FE2A00' },
    { Color: 'Tomato', Code: '#FF745C' }
];
  // maps the appropriate column to fields property
  const fields: { [key: string]: string } = { text: 'Color', value: 'Code' };
  // set the value to MultiSelect
  const colorValues: string[] = ['#75523C', '#4CD242', '#FF745C'];
  // bind the tagging event
  const onTagging = (e: TaggingEventArgs) => {
    // set the current selected item text as class to chip element.
    e.setClass((e.itemData as any)[fields.text].toLowerCase());
  }
  return (
      <MultiSelectComponent id="chip-customization" value={colorValues} dataSource={colorsData} fields={fields} mode="Box" placeholder="Favorite Colors" tagging={onTagging} />
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));