ChipListComponent

23 Sep 202524 minutes to read

Represents the Essential JS 2 React ChipList Component.

<ChipListComponent></ChipListComponent>

Properties

allowDragAndDrop boolean

Specifies a boolean value that indicates whether the chip item can be dragged and reordered.
This enables drag-and-drop functionality within a single container or across multiple containers of chips when dragging is enabled.

Defaults to false

avatarIconCss string

Specifies the icon CSS class for the avatar in the chip.

    <!DOCTYPE html>
    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
            <style>
                #chip .anne {
                    background-image: url('https://ej2.syncfusion.com/react/demos/src/chips/images/anne.png');
                }
            </style>
        </head>

        <body class="material">
            <div id='sample'>
        </body>
    </html>

    import { render } from 'react-dom';
    import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        Icon = "anne";
        render() {
            return ( 
                <ChipListComponent id="chip" text="Janet Leverling" avatarIconCss={this.Icon}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

Defaults to ’’

avatarText string

Specifies the customized text value for the avatar in the chip.

    import { render } from 'react-dom';
    import './index.css';
    import {  ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        text = 'J';
        render() {
            return (                            
                <ChipListComponent id="chip-default" text="Janet Leverling" avatarText= {this.text}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

Defaults to ’’

chips string[]|number[]|ChipModel[]

This chips property helps to render ChipList component.

    import { render } from 'react-dom';
    import * as ReactDom from 'react-dom';
    import {  ChipListComponent, ChipsDirective, ChipDirective  } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        render() {
            return (                            
                <ChipListComponent id="chip-avatar">
                    <ChipsDirective>
                        <ChipDirective text="Small"></ChipDirective>
                        <ChipDirective text="Medium"></ChipDirective>
                        <ChipDirective text="Large"></ChipDirective>
                        <ChipDirective text="Extra Large"></ChipDirective>
                    </ChipsDirective>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

Defaults to []

cssClass string

Specifies the custom classes to be added to the chip element used to customize the ChipList component.

    import { render } from 'react-dom';
    import {  ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        style = "e-outline"
        render() {
            return (                            
                <ChipListComponent text="Janet Leverling" cssClass={this.style}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

Defaults to ’’

dragArea HTMLElement|string

Specifies the target in which the draggable element can be moved and dropped.
By default, the draggable element movement occurs in the page.

Defaults to null

enableDelete boolean

Enables or disables the delete functionality of a chip.

    import { render } from 'react-dom';
    import * as ReactDom from 'react-dom';
    import {  ChipListComponent, ChipsDirective, ChipDirective  } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        bool = "true"
        render() {
            return (                            
                <ChipListComponent id="chip-avatar" enableDelete={this.bool}>
                    <ChipsDirective>
                    <ChipDirective text="Andrew"/>
                    <ChipDirective text="Janet"/>
                    <ChipDirective text="Laura"/>
                    <ChipDirective text="Margaret"/>
                    </ChipsDirective>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

Defaults to false

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled boolean

Specifies a value that indicates whether the chip component is enabled or not.

Defaults to true

htmlAttributes { : }

Allows additional HTML attributes such as aria labels, title, name, etc., and
accepts n number of attributes in a key-value pair format.

Defaults to {}

leadingIconCss string

Specifies the leading icon CSS class for the chip.

    <!DOCTYPE html>
    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
            <style>
                #chip .janet {
                    background-image: url('https://ej2.syncfusion.com/react/demos/src/chips/images/janet.png');
                }
            </style>
        </head>

        <body class="material">
            <div id='sample'>
        </body>
    </html>

    import { render } from 'react-dom';
    import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        Icon = "janet";
        render() {
            return ( 
                <ChipListComponent id="chip" text="Janet Leverling" leadingIconCss={this.Icon}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

Defaults to ’’

leadingIconUrl string

Specifies the leading icon url for the chip.

Defaults to ’’

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

selectedChips string[]|number[]|number

Sets or gets the selected chip items in the chip list.

    import { render } from 'react-dom';
    import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
    choice=[1,3];
        render() {
            return ( 
                <ChipListComponent id="chip-filter" selectedChips={this.choice} selection="Multiple">
                    <ChipsDirective>
                        <ChipDirective text="Extra small"></ChipDirective>
                        <ChipDirective text="Small"></ChipDirective>
                        <ChipDirective text="Medium"></ChipDirective>
                        <ChipDirective text="Large"></ChipDirective>
                        <ChipDirective text="Extra large"></ChipDirective>
                    </ChipsDirective>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

Defaults to []

selection Selection

Defines the selection type of the chip. The available types are:

Input chip
Choice chip
Filter chip
Action chip

Defaults to ‘None’

text string

Specifies the text content for the chip.

    import { render } from 'react-dom';
    import {  ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
    name = "Janet Leverling";
        render() {
            return (                            
                <ChipListComponent text={this.name}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

Defaults to ’’

trailingIconCss string

Specifies the trailing icon CSS class for the chip.

    import { render } from 'react-dom';
    import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
    Icon = "e-dlt-btn";
        render() {
            return ( 
                <ChipListComponent id="chip" text="Janet Leverling" trailingIconCss={this.Icon}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

Defaults to ’’

trailingIconUrl string

Specifies the trailing icon url for the chip.

Defaults to ’’

Methods

add

Allows adding the chip item(s) by passing a single or array of string, number, or ChipModel values.

    import { render } from 'react-dom';
    import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
    import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        onClick(args) {
            this.chip.add('jenifer');    
        }
        render() {
            return (
                <div>
                    <ChipListComponent id="chip-avatar" ref={t => (this.chip = t)}>
                        <ChipsDirective>
                            <ChipDirective text="Andrew"></ChipDirective>
                            <ChipDirective text="Janet"></ChipDirective>
                            <ChipDirective text="Laura"></ChipDirective>
                            <ChipDirective text="Margaret"></ChipDirective>
                        </ChipsDirective>
                    </ChipListComponent>
                    <ButtonComponent onClick={this.onClick.bind(this)}>Add Item</ButtonComponent>
                </div>
            );
        }
    }

    render(<Default />, document.getElementById('sample'));
```<br> |

Returns *void*

### destroy

Removes the component from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.

import { render } from 'react-dom';
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';

export class Default extends SampleBase {
onClick(args) {
        this.chip.destroy();    
    }
    render() {
        return (
            <div>
                <ChipListComponent id="chip-avatar" ref={t => (this.chip = t)}>
                    <ChipsDirective>
                        <ChipDirective text="Andrew"></ChipDirective>
                        <ChipDirective text="Janet"></ChipDirective>
                        <ChipDirective text="Laura"></ChipDirective>
                        <ChipDirective text="Margaret"></ChipDirective>
                    </ChipsDirective>
                </ChipListComponent>
                <ButtonComponent onClick={this.onClick.bind(this)}>Destroy</ButtonComponent>
            </div>
        );
    }
}

render(<Default />, document.getElementById('sample')); ```

Returns void

find

A function that finds chip based on given input.

    import { render } from 'react-dom';
    import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
    import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
    onClick(args) {
            let name = this.chip.find([3]).text;
            alert('you have searched for ' +name);    
        }
        render() {
            return (
                <div>
                    <ChipListComponent id="chip-filter" ref={t => (this.chip = t)} selection="Multiple">
                        <ChipsDirective>
                            <ChipDirective text="Andrew"></ChipDirective>
                            <ChipDirective text="Janet"></ChipDirective>
                            <ChipDirective text="Laura"></ChipDirective>
                            <ChipDirective text="Margaret"></ChipDirective>
                            </ChipsDirective>
                    </ChipListComponent>
                    <ButtonComponent onClick={this.onClick.bind(this)}>Find</ButtonComponent>
                </div>
            );
        }
    }

    render(<Default />, document.getElementById('sample'));
```<br> |

Returns [*ChipDataArgs*](./chipDataArgs)

### getSelectedChips

Returns the selected chip(s) data.

import { render } from 'react-dom';
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';

export class Default extends SampleBase {
filterSelected = [1];
onClick(args) {
        let name = this.chip.getSelectedChips().text;
        alert('Selected chip is ' +name);  
    }
    render() {
        return (
            <div>
                <ChipListComponent id="chip-filter" ref={t => (this.chip = t)} selection="Single" selectedChips={this.filterSelected}>
                    <ChipsDirective>
                        <ChipDirective text="Andrew"></ChipDirective>
                        <ChipDirective text="Janet"></ChipDirective>
                        <ChipDirective text="Laura"></ChipDirective>
                        <ChipDirective text="Margaret"></ChipDirective>
                    </ChipsDirective>
                </ChipListComponent>
                <ButtonComponent onClick={this.onClick.bind(this)}>Show</ButtonComponent>
            </div>
        );
    }
}

render(<Default />, document.getElementById('sample')); ```

Returns SelectedItem | SelectedItems | undefined

remove

Allows removing the chip item(s) by passing a single or array of string, number, or ChipModel values.

    import { render } from 'react-dom';
    import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
    import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        onClick(args) {
            this.chip.remove([0]);    
        }
        render() {
            return (
                <div>
                    <ChipListComponent id="chip-avatar" ref={t => (this.chip = t)}>
                        <ChipsDirective>
                            <ChipDirective text="Small"></ChipDirective>
                            <ChipDirective text="Medium"></ChipDirective>
                            <ChipDirective text="Large"></ChipDirective>
                            <ChipDirective text="Extra Large"></ChipDirective>
                        </ChipsDirective>
                    </ChipListComponent>
                    <ButtonComponent onClick={this.onClick.bind(this)}>Remove</ButtonComponent>
                </div>
            );
        }
    }

    render(<Default />, document.getElementById('sample'));
```<br> |

Returns *void*

### select

Allows selecting the chip item(s) by passing a single or array of string, number, or ChipModel values.

Returns *void*

## Events

<h3 class="doc-prop-wrapper" id="beforeclick" data-Path="beforeclick-beforeClick"><span class='doc-prop-name'>beforeClick</span>

<span class="doc-prop-type"><span class="exclude-righttoc"><a href="./clickeventargs" class="doc-type-link exclude-righttoc">EmitType&lt;ClickEventArgs&gt;</a></span></span>

</h3>


Triggers before the click event of the chip is fired.
This event can be used to prevent the further process and restrict the click action over a chip.

import { render } from 'react-dom';
import * as ReactDom from 'react-dom';
import {  ChipListComponent, ChipsDirective, ChipDirective  } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';

export class Default extends SampleBase {
    chipClick(e) {
        alert('you have selected ' +e.text);
    }
    render() {
        return (                            
            <ChipListComponent id="chip-avatar" selection="Single" beforeClick={this.chipClick.bind(this)}>
                <ChipsDirective>
                    <ChipDirective text="Andrew"></ChipDirective>
                    <ChipDirective text="Janet"></ChipDirective>
                    <ChipDirective text="Laura"></ChipDirective>
                    <ChipDirective text="Margaret"></ChipDirective>
                </ChipsDirective>
            </ChipListComponent>
        );
    }
}
render(<Default />, document.getElementById('sample')); ```

click EmitType<ClickEventArgs>

Triggers when a chip is clicked.

    import { render } from 'react-dom';
    import * as ReactDom from 'react-dom';
    import {  ChipListComponent, ChipsDirective, ChipDirective  } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        chipClick(e) {
            alert('you have clicked ' + e.target.textContent);
        }
        render() {
            return (                            
                <ChipListComponent id="chip-avatar" onClick={this.chipClick.bind(this)}>
                    <ChipsDirective>
                    <ChipDirective text="Send a text"/>
                    <ChipDirective text="Set a remainder"/>
                    <ChipDirective text="Read my emails"/>
                    <ChipDirective text="Set alarm"/>
                    </ChipsDirective>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

created EmitType<Event>

Triggers when the component is created successfully.

    import { render } from 'react-dom';
    import {  ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        createEvent(e) {
            alert('Component Rendered Successfully');
        }
        render() {
            return (                            
                <ChipListComponent id="chip-default" text="Janet Leverling" onCreated={this.createEvent(this)}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

delete EmitType<DeleteEventArgs>

Fires before removing the chip element.

    import { render } from 'react-dom';
    import * as ReactDom from 'react-dom';
    import {  ChipListComponent, ChipsDirective, ChipDirective  } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        deleteEvent(e) {
            alert('you have deleted ' + e.text);
        }
        render() {
            return (                            
                <ChipListComponent id="chip-avatar" enableDelete="true" delete={this.deleteEvent.bind(this)}>
                    <ChipsDirective>
                    <ChipDirective text="Andrew"/>
                    <ChipDirective text="Janet"/>
                    <ChipDirective text="Laura"/>
                    <ChipDirective text="Margaret"/>
                    </ChipsDirective>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

deleted EmitType<ChipDeletedEventArgs>

Triggers when the chip item is removed.

dragStart EmitType<DragAndDropEventArgs>

Fires when a chip item starts moving due to a drag action.

dragStop EmitType<DragAndDropEventArgs>

Fires when a chip item is reordered after completing a drag action.

dragging EmitType<DragAndDropEventArgs>

Fires while a chip item is being dragged.

Search docs

Ask HelpBot

Search docs

Ask HelpBot

ChipListComponent

Properties

allowDragAndDrop boolean

avatarIconCss string

avatarText string

chips string[]|number[]|ChipModel[]

cssClass string

dragArea HTMLElement|string

enableDelete boolean

enablePersistence boolean

enableRtl boolean

enabled boolean

htmlAttributes { : }

leadingIconCss string

leadingIconUrl string

locale string

selectedChips string[]|number[]|number

selection Selection

text string

trailingIconCss string

trailingIconUrl string

Methods

add

find

remove

click EmitType<ClickEventArgs>

created EmitType<Event>

delete EmitType<DeleteEventArgs>

deleted EmitType<ChipDeletedEventArgs>

dragStart EmitType<DragAndDropEventArgs>

dragStop EmitType<DragAndDropEventArgs>

dragging EmitType<DragAndDropEventArgs>