ColorField

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

import { ColorField, Description, Label, Surface } from "@/components/ui/heroui-color-field";

export default function OnSurface() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <Surface className="w-[320px] p-4">
        <ColorField defaultValue="#3B82F6" name="color">
          <Label>Theme Color</Label>
          <ColorField.Group variant="secondary">
            <ColorField.Input />
          </ColorField.Group>
          <Description>Select your theme color</Description>
        </ColorField>
      </Surface>
    </div>
  );
}

export { OnSurface };