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	Allow user to select an alpha value.
defaultValue	string	The default value for the field.
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. Supported formats include: - HSL

Events

Event	Type
change	CustomEvent
input	CustomEvent

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