Skip to content
comp0

comp0

Fields

Color Field

A labelled native color swatch that opens the browser's picker.

When to use it: Use it when people choose one opaque color, such as a theme accent.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Hex sRGB only; the browser picker cannot store transparency.
Color Field.tsxtsx
import { Description, Label, TextField } from "@comp0/react";
import { ColorField } from "@comp0/react";

export function Example() {
  return (
    <TextField as="div" defaultValue="#0d9488" className="flex max-w-xs flex-col gap-1.5">
      <Label className="text-base font-medium text-zinc-900 sm:text-sm dark:text-zinc-100">
        Accent color
      </Label>
      <ColorField
        name="accent"
        className="h-11 w-20 rounded border border-zinc-950/10 bg-white p-1 outline-teal-600 focus-visible:outline-2 sm:h-9 dark:border-white/10 dark:bg-zinc-900 dark:outline-teal-400"
      />
      <Description className="text-base text-zinc-600 sm:text-sm dark:text-zinc-400">
        Hex sRGB only; the browser picker cannot store transparency.
      </Description>
    </TextField>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. TextFieldOptional

    Shared field brain that connects the label, the color input, help, and errors. Does not add a DOM element.

  2. Label

    Names the color for sighted and assistive users. Owns a DOM element.

  3. ColorField

    Native color input; the browser supplies the swatch and picker. Owns a DOM element.

  4. DescriptionOptional

    Hint wired via aria-describedby. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Start a TextField with a Label naming what the color is for.

  2. 2

    Add the supporting parts

    Put ColorField inside it instead of Input, with a name so the value submits.

  3. 3

    Make the behavior clear

    The native value is hex sRGB without alpha, such as "#0d9488"; say so in a Description when transparency might be expected.

    Exampletsx
    <TextField defaultValue="#0d9488"><Label>Accent color</Label><ColorField name="accent" /></TextField>

Keyboard

↵
Opens the browser color picker on the focused swatch.
Space
Opens the browser color picker on the focused swatch.

Forms and accessibility

Submits its hex value under name like any native input.

Accessibility checklist

  • Use Label so the swatch has a name; a bare colored square says nothing.
  • Show the chosen value or its meaning as visible text; the swatch alone is a color-only signal.
  • Native color inputs hold opaque hex sRGB only; explain that limit in a Description when alpha or wide gamut might be expected.

API reference

Importtsx
import { ColorField, Description, Label, TextField } from "@comp0/react";

TextField

OptionalContext only

Shared field brain that connects the label, the color input, help, and errors.

PropTypeDescription
valuestringControlled hex value such as "#0d9488".
defaultValuestringInitial hex value such as "#0d9488".
onChange(value: string) => voidReceives the next hex value.
disabled / invalid / requiredbooleanField state inherited by the color input and announced through the label pieces.

Label

DOM element

Names the color for sighted and assistive users.

ColorField

DOM element

Native color input; the browser supplies the swatch and picker.

PropTypeDescription
namestringSubmits the hex value with a form.
valuestringControlled hex value when standalone.
defaultValuestringInitial hex value when standalone.
onChange(event: ChangeEvent) => voidNative change event; read event.currentTarget.value for the hex string.
disabled / requiredbooleanOverrides the surrounding field state.

Description

OptionalDOM element

Hint wired via aria-describedby.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-value]

on ColorField

The current hex value.
[data-invalid]

on ColorField

The field is invalid.
:disabled

on ColorField

The input is disabled.
[data-focus-visible]

on ColorField

Focused via keyboard.

Keep exploring