Examples

Simple

Please choose a color:

View Code

<template>
  <div class="form__field">
    <div class="form__label">
      <strong>Please choose a color:</strong>
    </div>
    <div class="form__input">
      <v-swatches v-model="color" popover-x="left"></v-swatches>
    </div>
  </div>
</template>

<script>
export default {
   data () {
    return {
      color: '#A463BF',
    }
  }
}
</script>

Using a Preset

Vue Swatches has a bunch of presets ready to use. Make sure to check it out!

Please choose a color:

View Code

<template>
  <div class="form__field">
    <div class="form__label">
      <strong>Please choose a color:</strong>
    </div>
    <div class="form__input">
      <v-swatches
        v-model="color"
        popover-x="left"
        swatches="text-advanced"
      ></v-swatches>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      color: '#000000'
    }
  }
}
</script>

Using a Custom Trigger

You can use your custom trigger. Useful to show buttons, icons, custom inputs!

View Code

<template>
 <div class="form__field">
    <div class="form__input">
      <v-swatches v-model="color">
        <input slot="trigger" :value="color" class="form__input__element" readonly>
      </v-swatches>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      color: '#2ECC70'
    }
  }
}
</script>

Custom Colors

Remember to use always 6-digits hexadecimal colors. If you want to provide a transparent/no-color option you can use a empty string ('').

Please choose a color:

View Code

<template>
  <div class="form__field">
    <div class="form__label">
      <strong>Please choose a color:</strong>
    </div>
    <div class="form__input">
      <v-swatches
        v-model="color"

        :swatches="swatches"

        row-length="6"
        shapes="circles"
        show-border
        popover-x="left"
      ></v-swatches>
    </div>
  </div>
</template>

<script>
export default {
  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>
  <div class="form__field">
    <div class="form__label">
      <strong>Please choose a color:</strong>
    </div>
    <div class="form__input">
      <v-swatches
        v-model="color"
        :swatches="swatches"
        row-length="5"
        popover-x="left"
      ></v-swatches>
    </div>
  </div>
</template>

<script>
export default {
  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>
  <div class="form__field">
    <div class="form__label">
      <strong>Please choose a color:</strong>
      <v-swatches v-model="color" inline></v-swatches>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: null
    }
  }
}
</script>

Inline + Custom UI

View Code

<template>
  <div class="form__field">
    <div class="form__label">
      <custom-modal btnText="Please choose a color">
        <div class="custom-ui-class">
          <v-swatches v-model="color" inline></v-swatches>
        </div>
      </custom-modal>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      color: null
    }
  }
}
</script>

<style scoped>
  .custom-ui-class {
    width: 348px;
    height: 320px;
    margin-left: auto;
    margin-right: auto;
  }
</style>

Disabling Swatches

You can disable specific swatches adding disabled: true

Please choose a color:

View Code

<template>
  <div class="form__field">
    <div class="form__label">
      <strong>Please choose a color:</strong>
    </div>
    <div class="form__input">
      <v-swatches
        v-model="color"
        :swatches="swatches"
        popover-x="left"
      ></v-swatches>
    </div>
  </div>
</template>

<script>
export default {
 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 with fallback-input-class, fallback-ok-class and 'fallback-ok-text'

Please choose a color:

View Code

<template>
  <div class="form__field">
    <div class="form__label">
      <strong>Please choose a color:</strong>
    </div>
    <div class="form__input">
      <v-swatches
        v-model="color"

        show-fallback

        popover-x="left"
      ></v-swatches>
    </div>
  </div>
</template>

<script>
export default {
  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>
  <div class="form__field">
    <div class="form__label">
      <strong>Please choose a color:</strong>
    </div>
    <div class="form__input">
      <v-swatches
        v-model="color"

        show-fallback
        fallback-input-type="color"

        popover-x="left"
      ></v-swatches>
    </div>
  </div>
</template>

<script>
export default {
 data () {
    return {
      color: '#A463BF',
    }
  }
}
</script>