Color Field

#Anatomy

• #default: Optional content after the input. Receives value, draft, and isInvalid.

#Usage

<script setup lang="ts">
import { ColorArea, ColorPicker, ColorSlider } from "akaza-ui";
import { ref } from "vue";
const color = ref("#56d799");
const areaUi = {
  root: "aspect-square w-full rounded-lg data-[akaza-focused]:ring-2 data-[akaza-focused]:ring-ring",
  area: "rounded-lg",
  thumb: "size-5 rounded-full border-2 border-neutral-400 bg-white shadow-sm",
};
const sliderUi = {
  root: "h-6 w-full rounded-md data-[akaza-disabled]:opacity-50",
  axis: "peer outline-none",
  track: "h-3 w-full rounded-full bg-muted",
  thumb:
    "size-6 rounded-full border-2 border-neutral-400 bg-white shadow-sm peer-data-[akaza-focus-visible]:ring-2 peer-data-[akaza-focus-visible]:ring-ring peer-data-[akaza-focus-visible]:ring-offset-2 peer-data-[akaza-focus-visible]:ring-offset-background",
};
</script>

<template>
  <div class="grid gap-4">
    <output class="text-sm text-muted-foreground">Current: {{ color }}</output>
    <ColorPicker
      v-model="color"
      :ui="{ root: 'grid w-full max-w-64 gap-3' }"
      aria-label="Brand color controls"
    >
      <ColorArea
        color-space="hsl"
        x-channel="hue"
        y-channel="saturation"
        :ui="areaUi"
        aria-label="Brand area"
      />
      <label class="grid gap-1 text-xs text-muted-foreground">
        Lightness
        <ColorSlider
          channel="lightness"
          color-space="hsl"
          :ui="sliderUi"
          aria-label="Lightness"
        />
      </label>
      <label class="grid gap-1 text-xs text-muted-foreground">
        Opacity
        <ColorSlider
          channel="alpha"
          color-space="hsl"
          :ui="sliderUi"
          aria-label="Opacity"
        />
      </label>
    </ColorPicker>
  </div>
</template>

#Examples

#Required field and form reset

Enter a valid color to submit the form. This example submits LCH text. Reset clears the field.

<Dialog
  :ui="{
    overlay: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
    content: 'bg-white rounded-xl shadow-xl w-full max-w-md',
    header: 'flex items-center justify-between p-6 border-b',
    body: 'p-6',
    footer: 'flex justify-end gap-2 p-6 border-t',
  }"
>

See the live demo's code for fieldUi and the submit handler.

#Formats

Set format to choose the returned color string. It does not change which colors you can enter or which channels you edit. See supported formats. Changing the format keeps opacity and emits value-change with reason format. HEX uses eight digits for transparent colors; hexa uses eight digits for all colors.

HEX and RGB can lose colors outside sRGB. The control keeps the original color until you replace the model or enter a new value. Area and slider previews use sRGB. See precision and gamut for details.

Use a color value such as #56d799 or oklch(0.65 0.2 250). CSS variables, currentColor, and relative color expressions are not supported.

#Behavior

The field starts empty. While you type an incomplete value such as # or oklch(, the model keeps its last valid color. The field shows validation state after you leave it. Invalid drafts block form submission. Press Escape to restore the last valid color.

Valid input updates v-model as you type. Leaving the input or pressing Enter emits value-commit. The visible input handles browser validation; a hidden input submits the color in the chosen format. Use ui.input to style the text box; class styles its wrapper.

Set channel to edit one number, such as hue or opacity. Set colorSpace to choose its units. See useColor channels for the ranges and steps.

#API Reference

#Props

#Emits

#Slots

• #default: Optional content after the input. Receives value, draft, and isInvalid.

#UI Options

#Styling Hooks

Form state attributes: data-akaza-disabled, data-akaza-readonly, data-akaza-invalid, data-akaza-focused, data-akaza-touched, data-akaza-dirty, data-akaza-filled, and data-akaza-out-of-gamut. Each appears only when true.

Use class or ui.root to style the root. Use the other ui keys for inner parts. Set sizes, borders, and colors in your own styles.

#Keyboard

#Parity Notes

ColorField combines Reka's root and input parts in one component. Use ui.input to style the input. The supplied Base UI reference has no color field component.