Forms

ColorPicker

Color picker with v-model support. Wraps the Polaris <s-color-picker> web component.

Usage

<script setup>
const color = ref('')
</script>

<template>
  <ShColorPicker v-model="color" alpha />
</template>

Props

PropTypeDefaultDescription
modelValuestringBound value (use with v-model)
alphabooleanEnable alpha channel
defaultValuestringDefault value (uncontrolled)
namestringForm field name

Events

EventPayloadDescription
update:modelValuestringEmitted when value changes (v-model)
changeEventNative change event
inputEventNative input event

Slots

SlotDescription
defaultAdditional content

Polaris Element

Renders as <s-color-picker>. See Polaris ColorPicker docs.

© 2026 KiriminAja. Polaris and Shopify are trademarks of Shopify Inc.

KiriminAja not affiliated with Shopify.