React Chips

React Chips is used to enter multiple values on an input field.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import {Chips} from 'primereact/chips';

Getting Started

Chips requires an array as its value and onChange callback to update the model.

<Chips value={value} onChange={(e) => setValue(e.value)}></Chips>

Custom Content

A chip is customized using itemTemplate function where value is passed to return JSX.

<Chips value={value} onChange={(e) => setValue(e.value)} itemTemplate={customChip}></Chips>

customChip(item) {
    return (
        <div>
            <span>{item} - (active) </span>
            <i className="pi pi-user-plus"></i>
        </div>
    );
}

Theming

Chips supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Chips showcase for demos and documentation.