Chip
Chip represents entities using icons, labels and images.
Import #
import { ChipModule } from 'primeng/chip';Basic #
A basic chip with a text is created with the label property. In addition when removable is added, a delete icon is displayed to remove a chip, the optional onRemove event is available to get notified when a chip is hidden.
Icon #
A font icon next to the label can be displayed with the icon property.
Image #
The image property is used to display an image like an avatar.
Template #
Content can easily be customized with the dynamic content instead of using the built-in modes.
Accessibility #
Screen Reader
Chip uses the label property as the default aria-label, since any attribute is passed to the root element aria-labelledby or aria-label can be used to override the default behavior. Removable chips have a tabindex and focusable with the tab key.
Keyboard Support
| Key | Function |
|---|---|
| backspace | Hides removable. |
| enter | Hides removable. |
