ColorPicker

GitHub
A component to select a color.

Usage

Use the v-model directive to control the value of the ColorPicker.

<script setup lang="ts">
const value = ref('#00C16A')
</script>

<template>
  <PColorPicker v-model="value" />
</template>

Use the default-value prop to set the initial value when you do not need to control its state.

<template>
  <PColorPicker default-value="#00BCD4" />
</template>

RGB Format

Use the format prop to set rgb value of the ColorPicker.

<script setup lang="ts">
const value = ref('rgb(0, 193, 106)')
</script>

<template>
  <PColorPicker format="rgb" v-model="value" />
</template>

HSL Format

Use the format prop to set hsl value of the ColorPicker.

<script setup lang="ts">
const value = ref('hsl(153, 100%, 37.8%)')
</script>

<template>
  <PColorPicker format="hsl" v-model="value" />
</template>

CMYK Format

Use the format prop to set cmyk value of the ColorPicker.

<script setup lang="ts">
const value = ref('cmyk(100%, 0%, 45.08%, 24.31%)')
</script>

<template>
  <PColorPicker format="cmyk" v-model="value" />
</template>

CIELab Format

Use the format prop to set lab value of the ColorPicker.

<script setup lang="ts">
const value = ref('lab(68.88% -60.41% 32.55%)')
</script>

<template>
  <PColorPicker format="lab" v-model="value" />
</template>

Throttle

Use the throttle prop to set the throttle value of the ColorPicker.

<script setup lang="ts">
const value = ref('#00C16A')
</script>

<template>
  <PColorPicker :throttle="100" v-model="value" />
</template>

Size

Use the size prop to set the size of the ColorPicker.

<template>
  <PColorPicker size="xl" />
</template>

Disabled

Use the disabled prop to disable the ColorPicker.

<template>
  <PColorPicker disabled />
</template>

Examples

As a Color chooser

Use a Button and a Popover component to create a color chooser.

<script setup lang="ts">
import { computed, ref } from 'vue';

const color = ref('#00C16A');

const chip = computed(() => ({ backgroundColor: color.value }));
</script>

<template>
  <PPopover>
    <PButton
      label="Choose color"
      color="neutral"
      variant="outline"
    >
      <template #leading>
        <span
          :style="chip"
          class="rounded-full size-3"
        />
      </template>
    </PButton>

    <template #content>
      <PColorPicker
        v-model="color"
        class="p-2"
      />
    </template>
  </PPopover>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

throttle50 number

Throttle time in ms for the color picker

disabledboolean

Disable the color picker

defaultValue'#FFFFFF' string

The default value of the color picker

format'hex' "hex" | "rgb" | "hsl" | "cmyk" | "lab"

Format of the color

size'md' "md" | "xs" | "sm" | "lg" | "xl"
modelValue string
pohon { root?: ClassValue; picker?: ClassValue; selector?: ClassValue; selectorBackground?: ClassValue; selectorThumb?: ClassValue; track?: ClassValue; trackThumb?: ClassValue; }

Emits

Event Type
update:modelValue[value: string | undefined]

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PColorPicker. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts
export default defineAppConfig({
  pohon: {
    colorPicker: {
      slots: {
        root: '',
        picker: '',
        selector: '',
        selectorBackground: '',
        selectorThumb: '',
        track: '',
        trackThumb: ''
      },
      variants: {
        size: {
          xs: {
            selector: '',
            track: ''
          },
          sm: {
            selector: '',
            track: ''
          },
          md: {
            selector: '',
            track: ''
          },
          lg: {
            selector: '',
            track: ''
          },
          xl: {
            selector: '',
            track: ''
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md'
      }
    }
  }
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    colorPicker: {
      slots: {
        root: '',
        picker: '',
        selector: '',
        selectorBackground: '',
        selectorThumb: '',
        track: '',
        trackThumb: ''
      },
      variants: {
        size: {
          xs: {
            selector: '',
            track: ''
          },
          sm: {
            selector: '',
            track: ''
          },
          md: {
            selector: '',
            track: ''
          },
          lg: {
            selector: '',
            track: ''
          },
          xl: {
            selector: '',
            track: ''
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md'
      }
    }
  }
};

Changelog

No recent changes

CheckboxGroup

A set of checklist buttons to select multiple option from a list.

FileUpload

An input element to upload files.