You are currently viewing the documentation for
Vuetify 3
Go to Vuetify 2
Introduction
Why Vuetify?
Long-term support
Roadmap
Meet the team
Sponsors and backers
Professional support
For Enterprise
Getting started
Installation
Frequently asked questions
Wireframes
Browser support
Upgrade guide
Release notes
Contributing
Features
Aliasing
Application layout
Blueprints
Display & Platform
Global configuration
Icon Fonts
Internationalization (i18n)
SASS variables
Theme
Treeshaking
Styles and animations
CSS Reset
Transitions
Material color palette
Utility classes
Border radius
Content
Display
Elevation
Flex
Float
Overflow
Sizing
Spacing
Text and typography
Components
All Components
Containment
Buttons
Cards
Chips
Dialogs
Dividers
Expansion panels
Lists
Menus
Overlays
Sheets
Toolbars
Tooltips
Navigation
App bars
Bottom navigation
Breadcrumbs
Footers
Navigation drawers
Pagination
System bars
Tabs
Form inputs & controls
Autocompletes
Checkboxes
Combobox
File inputs
Forms
Custom inputs
Radio buttons
Range sliders
Selects
Sliders
Switches
Text fields
Textareas
Data & display
Tables
Grids
Grids
Selection
Button toggles
Carousels
Chip groups
Item groups
Slide groups
Windows
Feedback
Alerts
Badges
Banners
Hover
Progress circular
Progress linear
Ratings
Snackbars
Timelines
Images & icons
Aspect ratios
Avatars
Icons
Images
Parallax
Pickers
Color pickers
Providers
Defaults providers
Locale providers
Theme providers
Miscellaneous
Lazy
No SSR
API
v-click-outside
v-intersect
v-mutate
v-resize
v-ripple
v-scroll
v-touch
useDisplay
useLayout
useLocale
useRtl
useTheme
v-alert-title
v-alert
v-app-bar-nav-icon
v-app-bar-title
v-app-bar
v-app
v-autocomplete
v-avatar
v-badge
v-banner-actions
v-banner-text
v-banner
v-bottom-navigation
v-breadcrumbs-divider
v-breadcrumbs-item
v-breadcrumbs
v-btn-group
v-btn-toggle
v-btn
v-card-actions
v-card-item
v-card-subtitle
v-card-text
v-card-title
v-card
v-carousel-item
v-carousel
v-checkbox-btn
v-checkbox
v-chip-group
v-chip
v-class-icon
v-code
v-col
v-color-picker
v-combobox
v-component-icon
v-container
v-counter
v-data-table-footer
v-data-table-row
v-data-table-rows
v-data-table-server
v-data-table-virtual
v-data-table
v-defaults-provider
v-dialog-bottom-transition
v-dialog-top-transition
v-dialog-transition
v-dialog
v-divider
v-expand-transition
v-expand-x-transition
v-expansion-panel-text
v-expansion-panel-title
v-expansion-panel
v-expansion-panels
v-fab-transition
v-fade-transition
v-field-label
v-field
v-file-input
v-footer
v-form
v-hover
v-icon
v-img
v-input
v-item-group
v-item
v-kbd
v-label
v-layout-item
v-layout
v-lazy
v-ligature-icon
v-list-group
v-list-img
v-list-item-action
v-list-item-media
v-list-item-subtitle
v-list-item-title
v-list-item
v-list-subheader
v-list
v-locale-provider
v-main
v-menu
v-messages
v-navigation-drawer
v-no-ssr
v-overlay
v-pagination
v-parallax
v-progress-circular
v-progress-linear
v-radio-group
v-radio
v-range-slider
v-rating
v-responsive
v-row
v-scale-transition
v-scroll-x-reverse-transition
v-scroll-x-transition
v-scroll-y-reverse-transition
v-scroll-y-transition
v-select
v-selection-control-group
v-selection-control
v-sheet
v-slide-group-item
v-slide-group
v-slide-x-reverse-transition
v-slide-x-transition
v-slide-y-reverse-transition
v-slide-y-transition
v-slider
v-snackbar
v-spacer
v-svg-icon
v-switch
v-system-bar
v-tab
v-table
v-tabs
v-text-field
v-textarea
v-theme-provider
v-timeline-item
v-timeline
v-toolbar-items
v-toolbar-title
v-toolbar
v-tooltip
v-validation
v-virtual-scroll
v-window-item
v-window
Directives
Click outside
Intersection observer
Mutation observer
Resize
Ripple
Scroll
Touch
Labs
Introduction
Data tables
Basics
Headers
Sorting
Pagination
Filtering
Grouping
Slots
Virtual tables
Server side tables
Virtual scrollers
Resources
Jobs for Vue
Vuetify UI Kits
About
Security disclosure
Code of conduct
Latest release:
v3.1.10
Contents
Component Pages
Props
Events
SASS Variables
Sponsors
Your logo here
#
v-color-picker API
#
Component Pages
Color Pickers
#
Props
#
Events
#
SASS Variables