Components
Loading preview...
Color input field with labels, descriptions, validation, and HSL channel editing.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-color-field"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 };