Aqua Basis

The AqColorPicker component enables users to select and apply colors. Supports input through an interactive palette, spectrum controls, or direct values in formats such as HEX or RGBA.

<aq-color-picker
	label="Color Picker"
></aq-color-picker>

Props and Attributes

Prop / Attr	Type	Default	Description
`label`	`string`	`''`	Label of the field.
`isError`	`boolean`	`false`	Applies error styling to the component by setting the field outline and helper text to the danger primary color while allowing normal interaction.
`isPlain`	`boolean`	`false`	Removes the outline from the field in its normal state for a cleaner look.

Applies less opacity to the elements visual style to indicate the disabled state. | | isReadonly | boolean | false | Enables readonly mode, allowing the user to see the selected value or placeholder without being able to modify it.

PlayGround

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-forms-aqcolorpicker--default&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

Events

Event	Description	React	Angular	Vue	Web Components
`input`	Event emitted when selecting a color.	`onInput={handleInput}`	`(input)="handleInput($event)"`	`@input="handleInput"`	`addEventListener('input', handler)`

Event Types

Event	React	Angular	Vue
`input`	`(e: CustomEvent<{ value: string, e: Event }>)`	`(e: CustomEvent<{ value: string, e: Event }>)`	`(e: CustomEvent<{ value: string, e: Event }>)`

Binding Support by Framework

Framework	Two-Way Binding Support	Example	Notes
Vue 3	✅ `v-model`	`v-model="colorPicker"`	Works with `ref` binding and emits updates
Angular	✅ `[(ngModel)]`	`[(ngModel)]="colorPicker"`	Requires FormsModule or standalone setup.
React	⚠️ Manual
Web Components	⚠️ Manual

In Frameworks

Web Components

<aq-color-picker
  id="id-color-picker"
  label="Color Picker"
  is-required
></aq-color-picker>
<script>
  const colorPicker = document.getElementById("id-color-picker");

  colorPicker.addEventListener('input', (event) => {
    console.log('Color picker input ', event);
  });
</script>

Vue

<script lang="ts">
  import { AqColorPicker } from '@aqua-ds/vue';
  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    components: {
      AqColorPicker,
    },
    setup() {
      const modelColorPicker = ref('');
      return {
        modelColorPicker,
      };
    },
  });
</script>

<template>
  <div>
    <aq-color-picker
      v-model="modelColorPicker"
      helperText="This is a helper text"
      label="This is a label"
      info="This is an information tooltip"
    />
    <span>{{ modelColorPicker }}</span>
  </div>
</template>

React

import { AqColorPicker } from "@aqua-ds/react";
import { useState } from "react";

export const ColorPicker = () => {
  const [valueColorPicker, setValueColorPicker] = useState("");

  const handleAqInput = (e: any) => {
    setValueColorPicker(e.target.value);
  };

  return (
    <div className="section">
      <AqColorPicker
        helper-text="This is a helper text"
        label="This is a label"
        info="This is an information tooltip"
        onInput={(e) => handleAqInput(e)}        
      ></AqColorPicker>
      <span>Selected Value: { valueColorPicker }</span>
    </div>
  );
};

Angular

// colorPicker.component.ts
import { Component } from "@angular/core";
import { AqColorPicker, AWCValueAccessor } from "@aqua-ds/angular";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
@Component({
  selector: "app-set-color-picker",
  imports: [AqColorPicker, FormsModule, ReactiveFormsModule, AWCValueAccessor],
  templateUrl: "./set-color-picker.component.html",
})
export class SetColorPickerComponent {
  modelColorPicker = "#000000";
}