Source: https://primereact.org/chips/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Chips

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

Import#

import { Chips } from 'primereact/chips';

Copy

Basic#

Chips is used as a controlled input with value and onChange properties where value should be an array.

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

Copy

Separator#

A new chip is added when enter key is pressed, separator property allows definining an additional key. Currently only valid value is , to create a new item when comma key is pressed.

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

Copy

Template#

Chip content is customized using itemTemplate function that receives a single chip value as a parameter.

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

Copy

Key Filter#

Chips has built-in key filtering support to block certain keys, refer to keyfilter page for more information.

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

Copy

Float Label#

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

Username

<FloatLabel>
    <Chips id="username" value={value} onChange={(e) => setValue(e.value)} />
    <label htmlFor="username">Username</label>
</FloatLabel>

Copy

Filled#

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

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

Copy

Invalid#

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

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

Copy

Disabled#

When disabled is present, the element cannot be edited and focused.

<Chips disabled placeholder="Disabled" />

Copy

Accessibility#

Screen Reader

Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. Chip list uses listbox role with aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip.

<label htmlFor="chips1">Tags</label>
<Chips inputId="chips1" />

<span id="chips2">Tags</span>
<Chips aria-labelledby="chips2" />

<Chips aria-label="Tags" />

Copy

Input Field Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the input element | | enter | Adds a new chips using the input field value. | | backspace | Deletes the previous chip if the input field is empty. | | left arrow | Moves focus to the previous chip if available and input field is empty. |

Chip Keyboard Support

| Key | Function | | --- | --- | | left arrow | Moves focus to the previous chip if available. | | right arrow | Moves focus to the next chip, if there is none then input field receives the focus. | | backspace | Deletes the chips and adds focus to the input field. |

Import
Basic
Separator
Template
Key Filter
Float Label
Filled
Invalid
Disabled
Accessibility

PrimeReact 10.9.7 by PrimeTek