Custom Color Input

Form-ready color picker 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.

Form-ready color picker input