About Custom Color Input
What it is
A color picker built to work inside native Framer forms. It renders as a clean input field with a live color swatch. Clicking the field opens a full HSV color picker, and whatever the user selects is stored as a hex value and submitted with the form under the field name you choose.
Key features
Native form integration — the selected hex is the field's submitted value, no setup required
Full HSV picker — a saturation/value palette, a hue slider, and a hex input field for typing exact colors
Live preview — the input swatch and picker preview update in real time as the user drags
Three interaction states — independently styled Default, Hover, and Focus states
Grouped controls — every property is organized into clear, collapsible sections (Content, Layout, Label Style, Input Style, and the three states)
Flexible sizing — fixed-width or fill-width, adjustable height, corner radius, and label gap
Typography control — set font family, size, weight, and color for both the label and the input
How to use
Place the component inside a Framer form and set the Form Name to match your form field
Customise the label, sizing, fonts, and state styling in the properties panel
Publish — the picked color submits automatically with the form
Support
Have a question or run into an issue? Reach out and I'll be happy to help. Refund details are available on the checkout page.
