Color Input

A styled color picker based on the native <input type="color"> control with preset swatches.

Basic color input

Brand color

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label" for="ci-basic">Brand color</label>
    <input id="ci-basic" type="color" class="lp-color-input" value="#3b82f6" />
</div>

Multiple colors

<div class="lp-d-flex lp-gap-3 lp-items-center lp-flex-wrap">
    <input type="color" class="lp-color-input" value="#3b82f6" />
    <input type="color" class="lp-color-input" value="#10b981" />
    <input type="color" class="lp-color-input" value="#ef4444" />
    <input type="color" class="lp-color-input" value="#f59e0b" />
    <input type="color" class="lp-color-input" value="#8b5cf6" />
    <input type="color" class="lp-color-input" value="#ec4899" />
</div>

With hex input

Pick a color

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-group-label">Pick a color</label>
    <div class="lp-d-flex lp-gap-2 lp-items-center">
        <input type="color" class="lp-color-input" value="#6366f1" id="ci-hex" />
        <input type="text" class="lp-input" value="#6366f1" id="ci-hex-text" />
    </div>
</div>
<script>
(function () {
    const picker = document.getElementById("ci-hex");
    const text = document.getElementById("ci-hex-text");
    picker.addEventListener("input", () => { text.value = picker.value; });
    text.addEventListener("input", () => {
        if (/^#[0-9A-Fa-f]{6}$/.test(text.value)) picker.value = text.value;
    });
})();
</script>

Disabled

<input type="color" class="lp-color-input" value="#3b82f6" disabled />

CSS reference

Class	Purpose
`.lp-color-input`	Styled native `<input type="color">` with rounded swatch