Ravox KitForms
Color Picker
A button showing the current color that opens a layer with the saturation and brightness area, the hue bar, the value in HEX, RGB or HSL (editable), the eyedropper and swatches. Drag with mouse and touch, move with the arrow keys (Shift for steps of 10). No dependencies: much more polished than the browser's native picker.
Cor da marca
Settings
Toggles
Examples
Brand color with preview
Cor do botão
Assinar agoraSmall, in RGB, no label
Installation
The command creates components/ui/color-picker.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add color-pickerProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | "#c6f24e" | The color in hex ("#c6f24e"; accepts #abc). value controls it; defaultValue only opens with a color. |
| onValueChange | (hex: string) => void | — | Receives the 6-digit hex on every change, including while dragging. |
| label | ReactNode | — | Label above the button; also the name of the panel for screen readers. |
| format | "hex" | "rgb" | "hsl" | "hex" | Format the button shows and that opens selected. Inside the panel the person can switch. |
| swatches | string[] | — | Ready-made colors (hex) at the end of the panel. Ready-made list: defaultSwatches. |
| size | "sm" | "md" | "lg" | "md" | Button height: 32, 40 or 48px. |
| swatchesOnly | boolean | false | Only the square swatch, without the value beside it (toolbar). Give it an aria-label. |
| onBlur | () => void | — | Focus left the button and the panel (the Controller's onBlur). |
| name | string | — | Sends the hex in an <input type="hidden">. |
| wrapperClassName · panelClassName | string | — | Classes of the outer block and of the floating panel. className goes on the button. |