Color Input
This is a Labs component. The API may change in future releases. Import from vuetify/labs/VColorInput.
<template>
<v-color-input
v-model="color"
label="Select Color"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VColorInput } from 'vuetify/labs/VColorInput'
const color = ref('#FF5252')
</script>
The selected color value.
Hides the color indicator pip.
Colors the pip with the selected color.
Icon displayed in the color pip.
Location of the color pip. Options: prepend, prepend-inner, append, append-inner.
Variant style for the pip avatar.
Props passed to the internal VMenu component.
Props passed to the internal VColorPicker component.
Hides the save/cancel action buttons.
Emitted when the color value changes.
actions
{ save, cancel, isPristine }
Customize the action buttons in the color picker.
Examples
With Color Pip
<template>
<v-color-input
v-model="color"
label="Background Color"
color-pip
/>
</template>
<script setup>
import { ref } from 'vue'
import { VColorInput } from 'vuetify/labs/VColorInput'
const color = ref('#1976D2')
</script>
Custom Picker Props
<template>
<v-color-input
v-model="color"
label="Color"
:picker-props="{
showSwatches: true,
mode: 'hex'
}"
/>
</template>
Without Actions
<template>
<v-color-input
v-model="color"
label="Quick Color"
hide-actions
/>
</template>
Different Pip Locations
<template>
<div class="d-flex flex-column ga-4">
<v-color-input
v-model="color1"
label="Prepend"
pip-location="prepend"
color-pip
/>
<v-color-input
v-model="color2"
label="Prepend Inner"
pip-location="prepend-inner"
color-pip
/>
<v-color-input
v-model="color3"
label="Append"
pip-location="append"
color-pip
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { VColorInput } from 'vuetify/labs/VColorInput'
const color1 = ref('#FF5252')
const color2 = ref('#4CAF50')
const color3 = ref('#2196F3')
</script>
Custom Actions
<template>
<v-color-input v-model="color" label="Color">
<template #actions="{ save, cancel }">
<v-btn @click="cancel" text="Cancel" />
<v-btn @click="save" color="primary" text="Apply" />
</template>
</v-color-input>
</template>
With Validation
<template>
<v-color-input
v-model="color"
label="Theme Color"
:rules="[rules.required, rules.hex]"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VColorInput } from 'vuetify/labs/VColorInput'
const color = ref('')
const rules = {
required: value => !!value || 'Color is required',
hex: value => /^#[0-9A-F]{6}$/i.test(value) || 'Invalid hex color'
}
</script>
Disabled and Readonly
<template>
<div class="d-flex flex-column ga-4">
<v-color-input
v-model="color"
label="Disabled"
disabled
/>
<v-color-input
v-model="color"
label="Readonly"
readonly
/>
</div>
</template>