Chips

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

Import#


import { Chips } from 'primereact/chips';

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)} />

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="," />

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} />

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" />

Float Label#

A floating label appears on top of the input field when focused.

Username


<span className="p-float-label">
    <Chips id="username" value={value} onChange={(e) => setValue(e.value)} />
    <label htmlFor="username">Username</label>
</span>

Invalid#

Invalid state style is added using the p-invalid class to indicate a failed validation.


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

Disabled#

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


<Chips disabled placeholder="Disabled" />

Form#

Compatibility with popular React form libraries.

Formik#

Formik is a popular library for handling forms in React.


<Toast ref={toast} />
<Chips
    inputId="c_chipArray"
    name="chipArray"
    value={formik.values.chipArray}
    className={classNames({ 'p-invalid': isFormFieldInvalid('chipArray') })}
    onChange={(e) => {
        formik.setFieldValue('chipArray', e.value);
    }}
    pt={{
        input: { autoComplete: 'off' }
    }}
/>
{getFormErrorMessage('chipArray')}
<Button type="submit" label="Submit" className='w-7rem' />

Hook Form#

React Hook Form is another popular React library to handle forms.


<Toast ref={toast} />
<Controller
    name="chipArray"
    control={control}
    rules={{ required: 'At least one chip is required.' }}
    render={({ field, fieldState }) => <Chips id={field.name} name="chipArray" value={field.value} onChange={(e) => field.onChange(e.value)} className={classNames({ 'p-invalid': fieldState.error })} />}
/>
{getFormErrorMessage('chipArray')}
<Button type="submit" label="Submit" className="w-7rem" />

Style#

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-chips	Container element
p-chips-token	Chip element container.
p-chips-token-icon	Icon of a chip.
p-chips-token-label	label of a chip.
p-chips-input-token	Container of input element.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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" />

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.