Variants
Variants are a powerful feature that allows you to customize the appearance and behavior of components.
Edit this page
Copy Page as Markdown
Sheet components
Sheet components in Vuetify offer different stylistic variants to make it easy to fit them into different design contexts. Below is a table summarizing the six available variants.
| Variant | Description |
|---|---|
elevated | Provides a subtle box-shadow for a depth effect. |
flat | No shadow or depth, lies flat against the content. |
tonal | Adjusts the tone of the component’s background. |
outlined | Adds a colored border around the component. |
text | Removes the background color and elevation. |
plain | No styles, offering a clean slate for customization. |
Field components
Field components in Vuetify offer a comprehensive set of stylistic variants to elevate your forms and input fields. Whether you’re into Material Design or love to experiment, there’s a variant for every design challenge.
| Variant | Description |
|---|---|
underlined | A Material Design 2 variant with a focus underline. |
outlined | Adds a border that lifts the label when the field is focused. |
filled | The input field features a filled background. |
solo | Stands alone with subtle elevation for a distinct look. |
solo-inverted | Similar to solo but inverts input color when focused. |
solo-filled | Like solo, but with a filled background. |
plain | Strips away most styles for an almost blank slate. |
Ready for more?
Continue your learning with related content selected by the Team or move between pages by using the navigation links below.