# Examples
# Simple
Please choose a color:
View Code
<template><divclass="form__field"><divclass="form__label"><strong>Please choose a color:</strong></div><divclass="form__input"><v-swatchesv-model="color"popover-x="left"></v-swatches></div></div></template><script>exportdefault{data(){return{ color:'#A463BF',}}}</script># Using a Preset
Vue Swatches has a bunch ofpresets ready to use. Make sure to check it out!
Please choose a color:
View Code
<template><divclass="form__field"><divclass="form__label"><strong>Please choose a color:</strong></div><divclass="form__input"><v-swatchesv-model="color"popover-x="left"swatches="text-advanced"></v-swatches></div></div></template><script>exportdefault{data(){return{ color:'#000000'}}}</script># Using a Custom Trigger
You can use your custom trigger. Useful to showbuttons,icons, custominputs!
View Code
<template><divclass="form__field"><divclass="form__input"><v-swatchesv-model="color"><inputslot="trigger":value="color"class="form__input__element"readonly></v-swatches></div></div></template><script>exportdefault{data(){return{ color:'#2ECC70'}}}</script># Custom Colors
Remember to use always6-digits hexadecimal colors. If you want to provide atransparent/no-color option you can use a empty string ('').
Please choose a color:
View Code
<template><divclass="form__field"><divclass="form__label"><strong>Please choose a color:</strong></div><divclass="form__input"><v-swatchesv-model="color":swatches="swatches"row-length="6"shapes="circles"show-borderpopover-x="left"></v-swatches></div></div></template><script>exportdefault{data(){return{ color:'#F64272', swatches:['#F64272','#F6648B','#F493A7','#F891A6','#FFCCD5','']}}}</script># Nested Colors
You can use your own colors in a nested arrays.
Please choose a color:
View Code
<template><divclass="form__field"><divclass="form__label"><strong>Please choose a color:</strong></div><divclass="form__input"><v-swatchesv-model="color":swatches="swatches"row-length="5"popover-x="left"></v-swatches></div></div></template><script>exportdefault{data(){return{ color:'#b9f5f1', swatches:[['#F64272','#F6648B','#F493A7','#F891A6','#FFCCD5'],['#8b5aff','#a27bff','#b99cff','#d0bdff','#e8deff'],['#51e5db','#74ebe3','#96f0ea','#b9f5f1','#dcfaf8'],['#ffa51a','#ffb748','#ffc976','#ffdba3','#ffedd1']]}}}</script># Inline Mode
Inline Mode hides the trigger and show all the swatches right away! Useful for Advanced UI
Please choose a color:
View Code
<template><divclass="form__field"><divclass="form__label"><strong>Please choose a color:</strong><v-swatchesv-model="color"inline></v-swatches></div></div></template><script>exportdefault{data(){return{ color:null}}}</script># Inline + Custom UI
View Code
<template><divclass="form__field"><divclass="form__label"><custom-modalbtnText="Please choose a color"><divclass="custom-ui-class"><v-swatchesv-model="color"inline></v-swatches></div></custom-modal></div></div></template><script>exportdefault{data(){return{ color:null}}}</script><stylescoped>.custom-ui-class{width: 348px;height: 320px;margin-left: auto;margin-right: auto;}</style># Disabling Swatches
You can disable specific swatches addingdisabled: true
Please choose a color:
View Code
<template><divclass="form__field"><divclass="form__label"><strong>Please choose a color:</strong></div><divclass="form__input"><v-swatchesv-model="color":swatches="swatches"popover-x="left"></v-swatches></div></div></template><script>exportdefault{data(){return{ color:'#27AF60', swatches:[{ color:'#1FBC9C', disabled:true},"#1CA085",{ color:'#2ECC70', disabled:true},"#27AF60","#3398DB","#2980B9","#A463BF","#8E43AD","#3D556E","#222F3D",{ color:'#F2C511', disabled:true}]}}}</script># Fallback Input
If your user wants to use its own color you can use a fallback input and customizing it withfallback-input-class,fallback-ok-class and 'fallback-ok-text'
Please choose a color:
View Code
<template><divclass="form__field"><divclass="form__label"><strong>Please choose a color:</strong></div><divclass="form__input"><v-swatchesv-model="color"show-fallbackpopover-x="left"></v-swatches></div></div></template><script>exportdefault{data(){return{ color:'#A463BF',}}}</script># Fallback Input + Color Picker
You can set the fallback input type to color and get a visual color picker interface
Please choose a color:
View Code
<template><divclass="form__field"><divclass="form__label"><strong>Please choose a color:</strong></div><divclass="form__input"><v-swatchesv-model="color"show-fallbackfallback-input-type="color"popover-x="left"></v-swatches></div></div></template><script>exportdefault{data(){return{ color:'#A463BF',}}}</script>