import ColorPicker from 'primevue/colorpicker';
ColorPicker is used with the v-model property for two-way value binding.
<ColorPicker v-model="color" />
ColorPicker integrates seamlessly with the PrimeVue Forms library.
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-2">
<ColorPicker name="color" />
<Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
ColorPicker is displayed as a popup by default, add inline property to customize this behavior.
<ColorPicker v-model="color" inline />
Default color format to use in value binding is hex and other possible values can be rgb and hsb using the format property.
<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />
When disabled is present, the element cannot be edited and focused.
<ColorPicker v-model="color" disabled />
Specification does not cover a color picker yet and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
| Key | Function |
|---|---|
| tab | Moves focus to the color picker button. |
| space | Opens the popup and moves focus to the color slider. |
| Key | Function |
|---|---|
| enter | Selects the color and closes the popup. |
| space | Selects the color and closes the popup. |
| escape | Closes the popup, moves focus to the input. |
| Key | Function |
|---|---|
| arrow keys | Changes color. |
| Key | Function |
|---|---|
| up arrowdown arrow | Changes hue. |