packages/docs/src/pages/en/components/all.md
Vuetify Components are interactive building blocks for creating user interfaces.
<PageFeatures /> <PromotedEntry />Containment components wrap other components and provide additional functionality. They are typically used to provide a consistent layout or styling.
<v-row> <ComponentsListItem name="Button component" src="buttons">The button component allows users to take actions or make choices with a single tap
</ComponentsListItem> <ComponentsListItem name="Card components" src="cards">The card component is a versatile and enhanced sheet of paper that provides a simple interface for headings, text, images, and actions
</ComponentsListItem> <ComponentsListItem name="List components" src="lists">The list component is a display interface for items
</ComponentsListItem> <ComponentsListItem name="Chip component" src="chips">Chips are useful for displaying small pieces of information
</ComponentsListItem> <ComponentsListItem name="Divider components" src="dividers">Dividers are used to separate content into distinct sections or groups
</ComponentsListItem> <ComponentsListItem name="Expansion panel components" src="expansion-panels">Expansion panels are used to reveal additional content in a compact manner
</ComponentsListItem> <ComponentsListItem name="Menu component" src="menus">The menu component is used to display a list of actions that the user can make
</ComponentsListItem> <ComponentsListItem name="Dialog component" src="dialogs">The dialog component informs a user about a specific task and may contain critical information
</ComponentsListItem> <ComponentsListItem name="Bottom sheet component" src="bottom-sheets">The bottom sheet component elevates content from the bottom of the screen
</ComponentsListItem> <ComponentsListItem name="Overlay component" src="overlays">The overlay component is used to display a custom scrim that sits on top of the application
</ComponentsListItem> <ComponentsListItem name="Toolbar components" src="toolbars">Toolbars are used to label a content area and / or display a list of actions that the user can make
</ComponentsListItem> <ComponentsListItem name="Tooltip component" src="tooltips">Tooltips provide additional information about an element when the user hovers over it
</ComponentsListItem> <ComponentsListItem name="Sheet component" src="sheets">The sheet component is a simple piece of paper that can be used to style and customize a block of content
</ComponentsListItem> </v-row>Navigation components are used to navigate between different views or pages.
<v-row> <ComponentsListItem name="App bars" src="app-bars">The app bar is used for top level navigation items and current page actions
</ComponentsListItem> <ComponentsListItem name="FABs" src="floating-action-buttons">The floating action button is used for a promoted actions within an application
</ComponentsListItem> <ComponentsListItem name="Navigation drawers" src="navigation-drawers">Navigation drawers contain primary application navigation links
</ComponentsListItem> <ComponentsListItem name="Pagination component" src="paginations">The Pagination component is used to separate long sets of data
</ComponentsListItem> <ComponentsListItem name="Bottom navigation" src="bottom-navigation">The bottom navigation component is used for displaying navigation links on mobile
</ComponentsListItem> <ComponentsListItem name="Breadcrumbs components" src="breadcrumbs">Breadcrumbs are navigational helpers for router pages
</ComponentsListItem> <ComponentsListItem name="Footer component" src="footers">The footer component is a simple navigation area with inner site links
</ComponentsListItem> <ComponentsListItem name="Speed dials" src="speed-dials">The speed dial component is a floating action button that can reveal additional actions when clicked
</ComponentsListItem> <ComponentsListItem name="System bar" src="system-bars">The system bar component shows application information with iconography, time, and more
</ComponentsListItem> <ComponentsListItem name="Tabs components" src="tabs">Tabs are used to organize content into different sections that can be viewed independently
</ComponentsListItem> </v-row>Form components are used to collect user input in a variety of ways.
<v-row> <ComponentsListItem name="Autocomplete component" src="autocompletes">Autocompletes are used to provide suggestions to the user as they type into a field
</ComponentsListItem> <ComponentsListItem name="Combobox components" src="combobox">The combobox component is used to select a value from a list of options with the ability to enter a custom value
</ComponentsListItem> <ComponentsListItem name="Text field" src="text-fields">The text field component accepts textual input from users and is a replacement for the native text input element
</ComponentsListItem> <ComponentsListItem name="Checkbox components" src="checkboxes">The checkbox component is a replacement for the native input checkbox
</ComponentsListItem> <ComponentsListItem name="Switch components" src="switches">The switch component is an alternately styled checkbox
</ComponentsListItem> <ComponentsListItem name="Radio button" src="radio-buttons">The radio component is a replacement for its native counterpart
</ComponentsListItem> <ComponentsListItem name="File input" src="file-inputs">The file input component is used to select files from the user's device and is a replacement for the native file input element
</ComponentsListItem> <ComponentsListItem name="Form component" src="forms">The form component is used to wrap form elements and provide a consistent styling and a single source for validation
</ComponentsListItem> <ComponentsListItem name="Inputs component" src="inputs">Create custom inputs that can be used with the v-model directive
</ComponentsListItem> <ComponentsListItem name="Number input component" src="number-inputs" labs>The number input component is used for collecting numerical data from the user
</ComponentsListItem> <ComponentsListItem name="OTP Input component" src="otp-input" >The OTP input component is used for MFA authentication via input field
</ComponentsListItem> <ComponentsListItem name="Select component" src="selects">The select component is used to select a value from a list of options and is a replacement for the native select element
</ComponentsListItem> <ComponentsListItem name="Slider component" src="sliders">Sliders are used to select a value from a range of values by moving a slider thumb and are a replacement for the native input range element
</ComponentsListItem> <ComponentsListItem name="Range slider" src="range-sliders">Range sliders are regular sliders with the ability to select in a range
</ComponentsListItem> <ComponentsListItem name="Textarea component" src="textareas">The textarea component is a replacement for the native textarea element
</ComponentsListItem> </v-row>Layout components are used to create responsive layouts.
<v-row> <ComponentsListItem name="grids" src="grids">The grid component is used to create responsive layouts
</ComponentsListItem> </v-row>These components allow a user to select one or multiple items from a list of options.
<v-row> <ComponentsListItem name="Carousel component" src="carousels">Carousels are used to display multiple forms of visual content
</ComponentsListItem> <ComponentsListItem name="Button group" src="button-groups">Button groups are used to select between multiple options using the button component
</ComponentsListItem> <ComponentsListItem name="Chip group" src="chip-groups">Chip group is a wrapper component that makes chips interactive and allows them to be selected
</ComponentsListItem> <ComponentsListItem name="Window components" src="windows">The window component is used to display a block of content based upon a model
</ComponentsListItem> <ComponentsListItem name="Stepper components" src="steppers">The stepper component is a linear progress control used to break lengthy forms into smaller logical sections
</ComponentsListItem> </v-row>These components are used to display data and information in a variety of ways.
<v-row> <ComponentsListItem name="Confirm edit component" src="confirm-edit">The confirm edit component is used to confirm changes to data
</ComponentsListItem> <ComponentsListItem name="Data iterator component" src="data-iterators">The data iterator component provides an easy interface for paginating and sorting data
</ComponentsListItem> <ComponentsListItem name="Data table component" src="data-tables/basics">Data tables are used to display large amounts of data in a small amount of space
</ComponentsListItem> <ComponentsListItem name="Infinite scroll component" src="infinite-scroller">The Infinite scroll component is a container that loads more items when scrolling
</ComponentsListItem> <ComponentsListItem name="Server-side table component" src="data-tables/server-side-tables">Server side data tables are intended to be used with a server side data source
</ComponentsListItem> <ComponentsListItem name="Sparkline component" src="sparklines">The sparkline component creates beautiful and expressive simple graphs for displaying numerical data
</ComponentsListItem> <ComponentsListItem name="Virtual Data table component" src="data-tables/virtual-tables">The virtual data table component is used to display very large subsets of data
</ComponentsListItem> <ComponentsListItem name="Table component" src="tables">The table component is a barebones table for manually displaying data and is a replacement for the native table element
</ComponentsListItem> <ComponentsListItem name="Virtual scroll component" src="virtual-scroller">The virtual scroller component makes it possible to render large amounts of data without sacrificing performance
</ComponentsListItem> </v-row>These components are used to provide feedback to the user within content, over content, or in response to user actions.
<v-row> <ComponentsListItem name="Alert component" src="alerts">Alerts convey important information to the user
</ComponentsListItem> <ComponentsListItem name="Badge component" src="badges">Badges superscript or subscript an avatar-like icon or text onto content.
</ComponentsListItem> <ComponentsListItem name="Banner component" src="banners">Banners are used to communicate important information to the user
</ComponentsListItem> <ComponentsListItem name="Empty state component" src="empty-states">The empty state component is used to indicate that a page or area on a page has no content.
</ComponentsListItem> <ComponentsListItem name="Skeleton loader component" src="skeleton-loaders">Displays a content, enhancing perceived performance during data-fetching & rendering
</ComponentsListItem> <ComponentsListItem name="Snackbar component" src="snackbars">The snackbar component is used to display a message to the user that hovers over existing content
</ComponentsListItem> <ComponentsListItem name="Rating component" src="ratings">Ratings are useful for collecting user feedback
</ComponentsListItem> <ComponentsListItem name="Timeline components" src="timelines">Timeline components are used to display a list of events in chronological order
</ComponentsListItem> <ComponentsListItem name="Hover component" src="hover">The hover component is a wrapper component that allows you to react to hover events
</ComponentsListItem> <ComponentsListItem name="Progress circular component" src="progress-circular">Circular progress's are a visual indicator of numerical data in a circle
</ComponentsListItem> <ComponentsListItem name="Progress linear component" src="progress-linear">The linear progress component is used to display numerical data in a horizontal line
</ComponentsListItem> </v-row>This subset of components are used to display media in a variety of ways.
<v-row> <ComponentsListItem name="Aspect ratios component" src="aspect-ratios">The aspect ratio component enforces a defined ratio
</ComponentsListItem> <ComponentsListItem name="Avatar component" src="avatars">Avatars are used in numerous components to display avatars and profile pictures
</ComponentsListItem> <ComponentsListItem name="Icon component" src="icons">The icon component is an reusable component that can be used to display icons
</ComponentsListItem> <ComponentsListItem name="Image component" src="images">The image component provides a flexible interface for displaying images
</ComponentsListItem> <ComponentsListItem name="Parallax component" src="parallax">Creates a 3d effect that makes an image appear to move slower than the foreground
</ComponentsListItem> </v-row>These components are used to select a value from a specifically styled set of options.
<v-row> <ComponentsListItem name="Color picker component" src="color-pickers">The color picker component is used to select a color from a palette
</ComponentsListItem> <ComponentsListItem name="Date picker component" src="date-pickers">The date picker component is used to select a single date from a calendar month / year.
</ComponentsListItem> </v-row>The defaults provider component is used to set default values for all components within a template
</ComponentsListItem> <ComponentsListItem name="Locale provider component" src="locale-providers">The locale provider component allows you to change the language of all components within its slot
</ComponentsListItem> <ComponentsListItem name="Theme provider component" src="theme-providers">The theme provider component allows you to change the theme of all children components
</ComponentsListItem> </v-row>These components don't fit into a traditional category and are used for a variety of purposes.
<v-row> <ComponentsListItem name="Lazy component" src="lazy">The lazy component is a wrapper component that prevents the rendering of its child components until it is visible in the viewport
</ComponentsListItem> <ComponentsListItem name="No-ssr component" src="no-ssr">This component is used to prevent the rendering of its child components on the server
</ComponentsListItem> </v-row>::: info This page is under design construction and will be updated with the missing images over time. :::