ColorPicker

Form

A color selection component with swatches and a hex input. Triggers the native color picker on click.

Props

Prop	Type	Default	Description
`modelValue`	`string`	`"#7f00ff"`	Selected hex color (v-model).
`swatches`	`string[]`	`16 default colors`	Array of hex color strings.
`showInput`	`boolean`	`true`	Show the hex input + native picker.
`disabled`	`boolean`	`false`	Disables all interactions.

Swatches + hex input

vue

<script setup>
const color = ref('#7f00ff')
</script>
<template>
  <DsColorPicker v-model="color" :show-input="true" />
</template>

Swatches only

vue

<script setup>
const color = ref('#7f00ff')
</script>
<template>
  <DsColorPicker v-model="color" :show-input="true" />
</template>

Use DsColorPickerSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsColorPickerSkeleton />

FormField

Combobox