Usage #
Examples #
Basic #
InputTags is used to enter multiple tags. Press Enter to add a tag and Backspace to remove the last one.
Delimiter #
A custom delimiter like a comma can be used in addition to the Enter key to add tags. Enable addOnPaste to split pasted text using the delimiter.
Allow Duplicate #
By default, duplicate values are not allowed. Set allowDuplicate to enable adding the same value multiple times.
Max #
The maximum number of tags is limited using the max property.
Template #
Custom content can be displayed for each tag using the chip slot.
Typeahead #
When typeahead is enabled, a dropdown with suggestions is displayed as the user types. Define a suggestions array along with optionLabel to specify the display field. For grouped suggestions, use optionGroupLabel and optionGroupChildren properties. The complete event is triggered on input change, enabling dynamic filtering and updating of suggestions.
Events #
Use add and remove callbacks to listen for tag changes.
Float Label #
A floating label appears on top of the input field when focused.
Ifta Label #
IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
Filled #
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
Disabled #
When disabled is present, the element cannot be edited and focused.
Invalid #
The invalid property is used to indicate an invalid state.
Forms #
InputTags integrates seamlessly with the PrimeVue Forms library.
Accessibility #
Screen Reader
The container of the chip list uses listbox role with aria-orientation set to horizontal. The aria-label and aria-labelledby props can be used to describe the component.
When typeahead is enabled, the input element has combobox role in addition to aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant is used to instruct the screen reader which option to read during keyboard navigation within the popup list. A live region with aria-live set to polite announces the number of available results, and the input is linked to it via aria-describedby.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the input element. |
| enter | Adds a new tag with the current input value. |
| backspace | Removes the last tag when input is empty. |
| left arrow | Moves focus to the previous tag when input is empty. |
| right arrow | Moves focus to the next tag when focused on a tag. |
Tag Keyboard Support
| Key | Function |
|---|---|
| backspace | Removes the focused tag. |
| delete | Removes the focused tag. |
Popup Keyboard Support (Typeahead)
| Key | Function |
|---|---|
| tab | Selects the focused option and closes the popup, then moves focus to next element in page. |
| enter | Selects the focused option and closes the popup. |
| escape | Closes the popup. |
| down arrow | Moves focus to the next option. |
| up arrow | Moves focus to the previous option. |
| home | Moves focus to the first option. |
| end | Moves focus to the last option. |