Color Picker

SColorPicker is a visual color picker in a popover panel: a 2D saturation/brightness area, a hue slider (and optionally an alpha slider), preset swatches, and a hex field (SColorField). The trigger shows the current color. It is built on SPopover; the value is a hex string bound with v-model. The panel opens in a portal, so the demos are wrapped in <ClientOnly>.

Basic usage

<script setup>
import { ref } from 'vue'
const color = ref('#3B82F6')
</script>

<template>
  <SColorPicker
    v-model="color"
    label="Color"
  />
</template>

Alpha and presets

<script setup>
const swatches = ['#EF4444', '#F59E0B', '#10B981']
</script>

<template>
  <SColorPicker
    v-model="color"
    label="Brand color"
    with-alpha
    :swatches="swatches"
  />
</template>

Without the input

The hideInput flag hides the hex field in the panel, leaving only the saturation area, the hue slider, and the swatches.

<script setup>
import { ref } from 'vue'
const color = ref('#3B82F6')
</script>

<template>
  <SColorPicker
    v-model="color"
    label="Color"
    hide-input
  />
</template>

Disabled

disabled locks the trigger: the panel does not open and the color cannot be changed.

<template>
  <SColorPicker
    v-model="color"
    label="Color"
    disabled
  />
</template>

API

Props

Name	Type	Default	Description
square	boolean	undefined	Square field corners: removes the rounding (rounded by default).
label	string	undefined	Label next to the color preview (in the trigger).
with-alpha	boolean	false	Shows the opacity slider (alpha channel).
swatches	string[]	undefined	Preset swatches for quick selection (an array of hex strings).
hide-input	boolean	false	Hides the hex input in the panel.
disabled	boolean	false	Disables color selection.
aria-label	string	undefined	Accessible name of the trigger (aria-label).
swatches-label	string	undefined	Accessible name of the swatch group (taken from the locale dictionary by default).
flat	boolean	undefined	Removes the shadow. Overridden by the elevation prop when it is set.
elevation	0 | 1 | 2 | 3 | 4 | 5	undefined	Shadow level 0–5 (scale); 0 means no shadow. Overrides flat.
model-value	string	"#3B82F6"	Selected color in hex (for example #3B82F6). Two-way binding via v-model.

Events

Name	Signature	Description
update:modelValue	(value: string) => void	Emitted when modelValue changes. Used for two-way binding (v-model).