List

The List component is designed for displaying information in an organized manner. It can include avatars, content, actions, subheaders, and more. Lists help present content clearly, making it easy to identify specific items within a collection. They offer consistent styling for arranging groups of text and images effectively.

info

For more details about Vuetify’s usage of List component, click List page.
For more prop explanations, click Vuetify List API page.

Props

Attribute	Description	Type	Default
activeClass	Configure the active CSS class applied when the link is active.	string	undefined
class	Allows custom properties to take effect.	string	undefined
dark	Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes	boolean	false .
expand	Will only collapse when explicitly closed	boolean	false
subheader	Removes top padding. Used when previous sibling is a header	boolean	false
tag	Specify a custom tag used on the root element.	string	'div'
threeLine	Increases list-item height for three lines. This prop uses line-clamp and is not supported in all browsers.	boolean	false
tile	Removes the component’s border-radius	boolean	false .
twoLine	Increases list-item height for two lines. This prop uses line-clamp and is not supported in all browsers	boolean	false .
tabindex	It determines the order of switching from one component to another with the tab key.	string	undefined
visible	Visibility of List component	boolean	true

ListGroup

The ListGroup component is used to group related List-ListItemGroup-ListItem components together. It can be expanded or collapsed to show or hide the list items it contains, helping to organize content and improve navigation.

Note

It is not a visible component until it is used in a list pattern.

Props

Attribute	Description	Type	Default
appendIcon	Appends an icon to the component, uses the same syntax as Icon	string	'$expand'
activeClass	Configures the active CSS class applied when the link is active.	string	undefined
class	Allows custom properties to take effect.	string	undefined
eager	Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.	boolean	false
group	Assigns a route namespace. Accepts a string or regexp for determining active state	string | regexp	undefined
noAction	Removes left padding assigned for action icons from group items	boolean	false
prependIcon	Prepends an icon to the component, uses the same syntax as Icon	string	undefined
subGroup	Designates the component as nested list group	boolean	false
tabindex	It determines the order of switching from one component to another with the tab key.	string	undefined
value	Expands / Collapse the list-group	boolean	false
visible	Visibility of ListGroup component	boolean	true

Events

Attribute	Description
click	Event that is emitted when the component is clicked

Samples Component

AppendIcon

• Using appendIcon prop, arrow icon can be changed with any other icon.

  

ActiveClass

• When activeClass prop is defined as a CSS class, it is applied to the component when the link is active.

  

Color

• When the color prop is applied, a transparent color is appeared when the item is clicked.

  

PrependIcon

• Using prependIcon prop, users can add icons located before label.

  

SubGroup

• subGroup prop provides nested list group view.

  

ListItem

The ListItem component is used to display individual items within a List. Each list item can include an avatar, primary content, secondary content, and action icons. This component ensures that each item in the list is clearly distinguishable and consistently styled.

Props

Attribute	Type	Default	Description
activeClass	Configures the active CSS class applied when the link is active.	string	undefined
append	Setting append prop always appends the relative path to the current path. You can find more information about the append prop on the vue-router documentation.	boolean	false
dark	Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes	boolean	false .
href	Designates the component as anchor and applies the href attribute.	string	object
dense	Lowers max height of list tiles	boolean	false
disabled	Disables the component	boolean	false
exact	Matches the exact link. Without this, ‘/’ will match every route. You can find more information about the exact prop on the vue-router documentation.	boolean	false
inputValue	Controls the active state of the item. This is typically used to highlight the component	any	undefined
inactive	If set, the list tile will not be rendered as a link even if it has to/href prop or @click handler	boolean	false
link	Designates that the component is a link. This is automatic when using the href or to prop.	boolean	false
#selectable	Allow text selection inside list-item. This prop uses user-select.	boolean	false
tabindex	It determines the order of switching from one component to another with the tab key.	string	undefined
tag	Specify a custom tag used on the root element.	string	'div'
twoLine	Increases list-item height for three lines. This prop uses line-clamp and is not supported in all browse.	boolean	false
threeLine	Increases list-item height for two lines. This prop uses line-clamp and is not supported in all browsers.	boolean	false
to	Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.	string	object
visible	Visibility of ListItem component	boolean	true
target	Designates the target attribute. This should only be applied when using the href prop.	string	undefined
ripple	Applies the ripple directive.	boolean/object	undefined
visible	Visibility of ListItem component.	boolean	true

Events

Attribute	Description
click	Event that is emitted when the component is clicked
keydown

ListItemAction

The ListItemAction component is used to display action icons or buttons within a list item. It allows users to perform actions related to the list item, such as editing or deleting the item.

tip

Example: You can use listItemAction to add a clickable button or icon to a list item. This makes it easier for users to select or interact with certain elements.

Slots

Attribute	Description
default	The default Vue slot.

ListItemActionText

ListItemActionText is not a component used in Vuetify. However, the ListItemAction component represents actions added to a list item. It can contain content and icons and is usually located to the right of a list item.

Slots

Attribute	Description
default	The default Vue slot.

ListItemAvatar

The ListItemAvatar component is used to display an avatar image or icon within a list item. You can use this component to add dynamic sizing and edge radius for responsive images, icons, and text. If the rounded property is set to 0, an avatar without an edge radius will be displayed.

Slots

Attribute	Description
default	The default Vue slot.

ListItemContent

The ListItemContent component is used to hold the primary and secondary text within a list item (in the middle of a list item). This component provides a structured way to display textual information, ensuring that content is organized and easy to read. Content may include text, images and icons. Represents the main content of the list and can be customized.

Slots

Attribute	Description
default	The default Vue slot.

ListItemGroup

The ListGroup component is used to group of selectable ListItems together. It can be expanded or collapsed to show or hide the list items it contains, helping to organize content and improve navigation. It offers a clean interface for interactive lists. With this component, you can select and manage dynamic elements.

tip

Example: You can use ListItemGroup to select items within a list or mark a specific item.

Props

Attribute	Type	Default	Description
activeClass	Configure the active CSS class applied when the link is active.	string	undefined
class	Allows custom properties to take effect.	string	undefined
dark	Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.	boolean	false
mandatory	Forces a value to always be selected (if available).	boolean	false
multiple	Allows multiple selections. The value prop must be an array.	boolean	false
value	Sets the active list-item inside the list-group.	any	undefined
visible	Visibility of ListItemGroup component.	boolean	true

Events

Attribute	Description
change	Emitted when the component value is changed by user interaction

Slots

Attribute	Description
default	The default Vue slot.

ListItemIcon

The ListItemIcon component is used to display an icon within a list item. It helps to visually differentiate list items and can represent various actions or statuses associated with the item.

Slots

Attribute	Description
default	The default Vue slot.

ListItemTitle

The ListItemTitle component is used to display the primary text within a list item and usually located inside a list item. It serves as the main heading or title for the list item, making it easy to identify the item at a glance.

tip

Example: Consider a list containing the name of a user or the title of an item. This title represents the main content of the list and can be customized.

Slots

Attribute	Description
default	The default Vue slot.

ListItemSubTitle

The ListItemSubtitle component is used to display secondary text within a list item. It provides additional context or information about the list item, complementing the primary title.

tip

Example: Consider a list item that contains a user's first and last name. While the name title becomes the main title, the surname is added as a subtitle with ListItemSubtitle.

Slots

Attribute	Description
default	The default Vue slot.

Samples Qjson

ListExample
List