Color
Color picker field built on react-colorful that outputs an HSL string.
Preview
Usage
import { z } from "zod";
import { AutoForm } from "@vitnode/core/components/form/auto-form";
import { AutoFormColor } from "@vitnode/core/components/form/fields/color";const formSchema = z.object({
color: z.string().default("hsl(240, 80%, 60%)"),
});<AutoForm
formSchema={formSchema}
fields={[
{
id: "color",
component: props => <AutoFormColor {...props} label="Color" />,
},
]}
/>import { ColorPicker } from "@vitnode/core/components/ui/color-picker";The ColorPicker is controlled - pass the current value (an HSL string) and
handle onChange, which receives the new HSL string:
const [color, setColor] = useState("hsl(240, 80%, 60%)");
<ColorPicker value={color} onChange={setColor} />;Output format
Dragging the picker produces an HSL string such as hsl(240, 80%, 60%). Below
the picker is a text field where you can paste or type a color in any CSS
format - hex (#22c55e), rgb(...), hsl(...), or a named color - so the
stored value is whatever you enter. The picker is powered by
react-colorful and is
lazy-loaded, so its bundle only ships once the popover is opened.
Props
Prop
Type