ColorField

Forms 1

About

Color input field with labels, descriptions, validation, and HSL channel editing.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ColorField to your project and fits it to your theme.

Code

How ColorField is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { ColorField, ColorSwatch, Label, parseColor, type ColorValue } from "@/components/ui/heroui-color-field";

export default function ChannelEditing() {
  const [color, setColor] = React.useState<ColorValue | null>(parseColor("#7F007F"));
  const sourceInitialValue = "Current: #7F007F";

  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <div className="flex flex-col gap-4">
        <p className="text-sm text-muted-foreground">Edit individual HSL channels:</p>
        <div className="flex gap-4">
          <ColorField channel="hue" className="w-[100px]" colorSpace="hsl" name="hue" value={color} onChange={setColor}>
            <Label>Hue</Label>
            <ColorField.Group>
              <ColorField.Input />
            </ColorField.Group>
          </ColorField>
          <ColorField channel="saturation" className="w-[100px]" colorSpace="hsl" name="saturation" value={color} onChange={setColor}>
            <Label>Saturation</Label>
            <ColorField.Group>
              <ColorField.Input />
              <ColorField.Suffix>
                <span className="text-sm text-muted-foreground">%</span>
              </ColorField.Suffix>
            </ColorField.Group>
          </ColorField>
          <ColorField channel="lightness" className="w-[100px]" colorSpace="hsl" name="lightness" value={color} onChange={setColor}>
            <Label>Lightness</Label>
            <ColorField.Group>
              <ColorField.Input />
              <ColorField.Suffix>
                <span className="text-sm text-muted-foreground">%</span>
              </ColorField.Suffix>
            </ColorField.Group>
          </ColorField>
        </div>
        <div className="flex items-center gap-2">
          <ColorSwatch color={color ?? undefined} size="md" />
          <span className="text-sm" data-source-initial-value={sourceInitialValue}>
            Current: {color ? color.toString("hex") : "(empty)"}
          </span>
        </div>
      </div>
    </div>
  );
}

export { ChannelEditing };