- 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. -
- -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. | -
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. | -
InputChips is used as a controlled input with v-model property where it should be an array.
-When disabled is present, the element cannot be edited and focused.
-Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
-A floating label appears on top of the input field when focused. Visit
Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
-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.
-Chip content is customized using item slot that receives a single chip value as a parameter.
-{{ $attrs.description }}
-List of class names used in the styled mode.
-Name | -Element | -
---|---|
p-inputchips | -Container element | -
p-inputchips-token | -Chip element container. | -
p-inputchips-token-icon | -Icon of a chip. | -
p-inputchips-token-label | -label of a chip. | -
p-inputchips-input-token | -Container of input element. | -
- Visit Tailwind Presets project for detailed documentation, examples and ready-to-use presets about how to style - PrimeVue components with Tailwind CSS. -
-