Color inputs
The v-color-input component combines a text field with a color picker…
Installation
Labs components require a manual import and installation of the component.
import { VColorInput } from 'vuetify/labs/VColorInput'
export default createVuetify({
components: {
VColorInput,
},
})
Usage
At its core, the v-color-input component is a basic container that extends v-text-field.
<v-color-input color-pip label="Color input"></v-color-input>API
| Component | Description |
|---|---|
| v-color-input | Primary component |
| v-color-picker | Color picker component |
| v-text-field | Text field component |
Toggle Inline API
Guide
The v-color-input component provides a clean interface for selecting colors.
Props
The v-color-input component extends the v-text-field and v-color-picker component; and supports all of their props.
Pip location
You can move the pip icon within the input by utilizing the pip-location or hide it entirely with hide-pip.
Color Pip
The color-pip is a boolean that determines whether the pip icon color matches the selected color.
Pip variant
The pip-variant lets you further customize the pip icon.
Ready for more?
Continue your learning with related content selected by the Team or move between pages by using the navigation links below.