SColorPicker <s-color-picker>

import { SColorPicker } from 'polaris-vue-elements'

Example

Value: #008060

<script setup>
import { ref } from 'vue'
import { SColorPicker } from 'polaris-vue-elements'

const value = ref('#008060')
</script>

<template>
  <SColorPicker v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

v-model on <SColorPicker> binds to the value property and listens for the input DOM event.

<SColorPicker v-model="value" />

is equivalent to:

<SColorPicker :value="value" @input="value = $event.target.value" />

Props

Prop	Type	Description
alpha	boolean	Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.
defaultValue	string	The initial color value when the field first loads. Unlike placeholder, this is a real value that the user can edit and that gets submitted with the form. Once the user starts interacting, their input replaces it. Changing this property after the field has loaded has no effect. To update the field value at any time, use value instead.
id	string	A unique identifier for the element.
name	string	An identifier for the field that is unique within the nearest containing form.
value	string	The currently selected color value. Accepts multiple input formats: - Hex: #RGB, #RRGGBB, #RRGGBBAA (3, 6, or 8 digits) - RGB/RGBA: rgb(255, 0, 0) or rgb(255 0 0) (comma or space-separated) - HSL/HSLA: hsl(0, 100%, 50%) or hsl(0 100% 50%) Returns an empty string if the value is invalid. The change event always emits values in hex format.

Events

Event	Type
change	CustomEvent
input	CustomEvent

Listen for these with @change-style listeners on <SColorPicker>.