{{ doc.description }}
8 |When disabled is present, the element cannot be edited and focused.
4 |5 | Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like img along with aria-labelledby or aria-label to describe the component. In case 6 | avatars need to be tabbable, tabindex can be added as well to implement custom key handlers. 7 |
8 | 9 |Component does not include any interactive elements.
11 |5 | Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic, 6 | aria-live may be utilized as well. In case badges need to be tabbable, tabindex can be added to implement custom key handlers. 7 |
8 | 9 |Component does not include any interactive elements.
11 |Text to display is defined with the value property.
4 |5 | BlockUI manages aria-busy state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like role and aria-live can be used to define live regions. 6 |
7 | 8 |Component does not include any interactive elements.
10 |5 | Breadcrumb uses the nav element and since any attribute is passed to the root implicitly aria-labelledby or aria-label can be used to describe the component. Inside an ordered list is used where the list item 6 | separators have aria-hidden to be able to ignored by the screen readers. If the last link represents the current route, aria-current is added with "page" as the value. 7 |
8 | 9 |No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.
11 |Text to display on a button is defined with the label property.
4 |When disabled is present, the element cannot be used.
4 |5 | A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you require 6 | to use one of the landmark roles like region, you may use the role property. 7 |
8 | 9 |Component does not include any interactive elements.
13 |When disabled is present, the element cannot be edited and focused.
4 |Loading state can be used loading property.
4 |List of class names used in the styled mode.
4 || Name | 10 |Element | 11 |
|---|---|
| p-chip | 16 |Container element. | 17 |
| p-chip-image | 20 |Container element in image mode. | 21 |
| p-chip-text | 24 |Text of the chip. | 25 |
| pi-chip-remove-icon | 28 |Remove icon. | 29 |
ColorPicker is used with the v-model property for two-way value binding.
4 |When disabled is present, the element cannot be edited and focused.
4 |ColorPicker is displayed as a popup by default, add inline property to customize this behavior.
4 |ConfirmDialog is controlled via the ConfirmationService that needs to be installed as an application plugin.
4 |The service is available with the useConfirm function for Composition API or using the $confirm property of the application for Options API.
8 |ConfirmPopup is controlled via the ConfirmationService that needs to be installed as an application plugin.
4 |The service is available with the useConfirm function for Composition API or using the $confirm property of the application for Options API.
8 |DataTable has built-in support for ContextMenu, see the
Font Awesome is a popular icon library with a wide range of icons.
4 |Any time of image can be used as an icon.
4 |Material icons is the official icon library based on Google Material Design.
4 |Inline SVGs are embedded inside the dom.
4 |A video tutorial to demonstrate how to customize icons.
4 |DatePicker is used with the v-model property for two-way value binding.
4 |DatePicker is used a controlled input component with v-model property.
4 |Locale for different languages and formats is defined globally, refer to the
5 | DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you 6 | have full control over the roles like landmark and attributes like aria-live. 7 |
8 |Component does not include any interactive elements.
12 |Divider uses a separator role with aria-orientation set to either "horizontal" or "vertical".
5 | 6 |Component does not include any interactive elements.
8 |Visit accessibility section of
The close function is available through a dialogRef that is injected to the component loaded by the dialog.
4 |DynamicDialog uses the Dialog component internally, visit
The emits object defines callbacks to handle events emitted by the component within the Dialog.
4 | 5 |4 | There are {{ totalProducts }} products in total in this list. 5 |
6 |FileUpload uses a hidden native input element with type="file" for screen readers.
5 | 6 |Interactive elements of the uploader are buttons, visit the
FloatLabel does not require any roles and attributes.
5 | 6 |Component does not include any interactive elements.
8 |Fluid does not require any roles and attributes.
5 | 6 |Component does not include any interactive elements.
8 |IconField and InputIcon do not require any roles and attributes.
5 | 6 |Components does not include any interactive elements.
8 |PrimeIcons use the pi pi-{icon} syntax such as pi pi-check. A standalone icon can be displayed using an element such as i or span
4 |Icon color is defined with the color property which is inherited from parent by default.
4 |PrimeIcons is available at npm, run the following command to download it to your project.
4 |4 | PrimeIcons library is now available on Figma Community. By adding them as a library, you can easily use these 5 | icons in your designs. 6 |
7 |CSS file of the icon library needs to be imported in styles.scss of your application.
4 |Size of an icon is controlled with the font-size property of the element.
4 |Special pi-spin class applies infinite rotation to an icon.
4 |IftaLabel does not require any roles and attributes.
5 | 6 |Component does not include any interactive elements.
8 |Image is used similar to the standard img element.
4 |Enabling preview mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.
4 |Inplace component defines aria-live as "polite" by default, since any valid attribute is passed to the main container aria roles and attributes of the root element can be customized easily.
5 | 6 || Key | 12 |Function | 13 |
|---|---|
| 18 | enter 19 | | 20 |Switches to content. | 21 |
InputGroup and InputGroupAddon do not require any roles and attributes.
5 | 6 |Component does not include any interactive elements.
8 |When integerOnly is present, only integers can be accepted as input.
4 |Enable the mask option to hide the values in the input fields.
4 |Knob is used with the v-model property for two-way value binding.
4 |When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.
4 |When readonly present, value cannot be edited.
4 |Diameter of the knob is defined in pixels using the size property.
4 |Step factor is 1 by default and can be customized with step option.
4 |The border size is specified with the stroke property as a number in pixels.
4 |The command property of a menuitem defines the callback to run when an item is activated by click or a key event.
4 |4 | Menubar is a simple horizontal navigation component, for advanced use cases consider Marketing and 5 | Application NavBars in PrimeBlocks or templates with 6 | horizontal menus in application templates. 7 |
8 |Message component requires a content to display.
4 |Enable closable option to display an icon to remove a message.
4 |MeterGroup component uses meter role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby prop.
5 | 6 |Component does not include any interactive elements.
8 |When disabled is present, the element cannot be edited and focused.
4 |Loading state can be used loading property.
4 |PrimeVue is available for download on npm registry. For this setup, we'll also use the @primevue/nuxt-module module.
4 |Visit the nuxt-unstyled-tailwind project as an example.
4 |In your nuxt-config file, add the @primevue/nuxt-module module and configure PrimeVue plugin with theme set as none, this option disables the default design token based theming..
4 |4 | Download a release from github that matches your PrimeVue version. The minimum version requirement is v4.1.1. Once the zip is 5 | downloaded, extract the contents to a folder e.g. ./src/assets/primevue . 6 |
7 |4 | You may either choose to install the @nuxtjs/tailwindcss module or 5 | install Tailwind CSS manually; the prerequisite steps are covered by their guides. If you have Nuxt and Tailwind configured successfully, 6 | follow the next steps. 7 |
8 |Instead of the @tailwind directive, import the styles from node_modules.
4 |Add PrimeVue styles between the components and utilities.
7 |4 | The postcss-import plugin manages organization of multiple CSS files at build time. Begin with downloading 5 | the plugin. 6 |
7 |Add it as the first plugin at your PostCSS configuration.
10 |4 | The tailwindcss-primeui is an official plugin by PrimeTek to provide first class integration between a Prime UI library like 5 | PrimeVue and Tailwind CSS. It is designed to work both in styled and unstyled modes. 6 |
7 |Configure Tailwind to use the plugin.
10 |PassThrough configuration for each component type can be defined globally with the pt option of PrimeVue.
4 |A global configuration can be overriden with the local pt configuration in case you'd like to change the style of a particular component.
4 |When disabled is present, the element cannot be edited and focused.
4 |Strength meter is displayed as a popup while a value is being entered.
4 |When toggleMask is present, an icon is displayed to show the value as plain text.
4 |5 | ProgressBar components uses progressbar role along with aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby and 6 | aria-label props. 7 |
8 | 9 |Not applicable.
13 |ProgressBar is used with the value property.
4 |For progresses with no value to track, set the mode property to indeterminate.
4 |Custom content inside the ProgressBar is defined with the default slot.
4 |ProgressSpinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props.
5 |Component does not include any interactive elements.
9 |An infinite spin animation is displayed by default.
4 |Rating is used with the v-model property for two-way value binding.
4 |When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.
4 |Number of stars to display is defined with stars property.
4 |When readOnly present, value cannot be edited.
4 |Ripple element has the aria-hidden attribute as true so that it gets ignored by the screen readers.
5 | 6 |Component does not include any interactive elements.
8 |To start with, Ripple needs to be enabled globally. See the Configuration API for details.
4 |Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.
4 | 5 |Ripple describes how to use it with your own components and standard elements that needs to be imported and configured with a name of your choice. Global configuration is done with the app.directive function.
8 | 9 |When disabled is present, the element cannot be edited and focused.
4 |Loading state can be used loading property.
4 |5 | Skeleton uses aria-hidden as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container, you 6 | may use aria-busy on the container element as well to indicate the loading process. 7 |
8 | 9 |Component does not include any interactive elements.
12 |Slider is used with the v-model property for two-way value binding.
4 |Size of each movement is defined with the step property.
4 |5 | Tag does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the tags are dynamic, 6 | aria-live may be utilized as well. In case badges need to be tabbable, tabindex can be added to implement custom key handlers. 7 |
8 | 9 |Component does not include any interactive elements.
11 |Label of the tag is defined with the value property.
4 |Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.
5 | 6 |Component does not include any interactive elements.
8 |Toast component is controlled via the ToastService that needs to be installed as an application plugin.
4 |The service is available with the useToast function for Composition API or using the $toast property of the application for Options API.
8 |ToggleSwitch is used with the v-model property for two-way value binding.
4 |Enabling checked property displays the component as active initially.
4 |5 | Toolbar uses toolbar role to the root element, aria-orientation is not included as it defaults to "horizontal". Any valid attribute is passed to the root element so you may add additional properties like 6 | aria-labelledby to define the element if required. 7 |
8 | 9 |Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.
11 |Tooltip component uses tooltip role and when it becomes visible the generated id of the tooltip is defined as the aria-describedby of the target.
5 | 6 || Key | 12 |Function | 13 |
|---|---|
| 18 | escape 19 | | 20 |Closes the tooltip when focus is on the target. | 21 |
Delays to the enter and leave events are defined with showDelay and hideDelay options respectively.
4 |Event to display the tooltip is defined as a modifier, default event is hover.
4 |VirtualScroller has no specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element.
5 | 6 |Component does not include any built-in interactive elements.
8 |PrimeVue is available for download on npm registry.
4 |Visit the vite-unstyled-tailwind project as an example.
4 |Configure PrimeVue plugin with theme set as none, this option disables the default design token based theming.
4 |4 | Download a release from github that matches your PrimeVue version. The minimum version requirement is v4.1.1. Once the zip is 5 | downloaded, extract the contents to a folder e.g. ./src/assets/primevue . 6 |
7 |4 | The prerequisite steps are covered by the Install Tailwind CSS with Vite guide. If you have Vite and Tailwind configured successfully, 5 | follow the next steps. 6 |
7 |Instead of the @tailwind directive, import the styles from node_modules.
4 |Add PrimeVue styles between the components and utilities.
7 |4 | The postcss-import plugin manages organization of multiple CSS files at build time. Begin with downloading 5 | the plugin. 6 |
7 |Add it as the first plugin at your PostCSS configuration.
10 |4 | The tailwindcss-primeui is an official plugin by PrimeTek to provide first class integration between a Prime UI library like 5 | PrimeVue and Tailwind CSS. It is designed to work both in styled and unstyled modes. 6 |
7 |Configure Tailwind to use the plugin.
10 |