Color Picker

January 15, 2026 · View on GitHub

General

import React from "react";
import ColorPicker from 'funda-ui/ColorPicker';

// component styles
import 'funda-ui/ColorPicker/index.css';

export default () => {

    function handleChange(e) {
         console.log(e.target.value);
    }

    return (
        <>
            <ColorPicker
                clearBtnLabel="clear"
                name="name"
                shape="circle"
                onChange={handleChange}
            />



        </>
    );
}

No spacing

import React from "react";
import ColorPicker from 'funda-ui/ColorPicker';

// component styles
import 'funda-ui/ColorPicker/index.css';

export default () => {


    return (
        <>

            <ColorPicker
                ...
                wrapperClassName="position-relative"
                ...
            />

             <ColorPicker
                ...
                wrapperClassName=""
                ...
            />

        </>
    );
}

Asynchronous Usage

import React, { useEffect, useState } from "react";
import ColorPicker from 'funda-ui/ColorPicker';


// component styles
import 'funda-ui/ColorPicker/index.css';

export default () => {

    const [inputValue, setInputValue] = useState('');

    useEffect(() => {
       setInputValue('#ff6600');
    }, []);


    return (
        <>
            <ColorPicker
                clearBtnLabel={'Clear'}
                shape="circle"
                value={inputValue}
                name="name"
                onChange={(e) => {
                    setInputValue(e.target.value);
                }}
            />

        </>
    );
}

❤️ API

Color Picker

import ColorPicker from 'funda-ui/ColorPicker';

Property	Type	Default	Description	Required
`ref`	React.ForwardedRef	-	It is the return element of this component.	-
`wrapperClassName`	string	`mb-3 position-relative`	The class name of the control wrapper.	-
`controlClassName`	string	`form-control custom-form-control-color flex-grow-0`	The class name of the control.	-
`clearBtnClassName`	string	`btn btn-link btn-sm`	The class name of the clear button.	-
`clearBtnLabel`	string	`clear`	The label of the clear button.	-
`value`	string	-	Set a default value for this control	-
`requiredLabel`	string \| ReactNode	`<span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span>`	It is used to specify a label for an element required.	-
`label`	string \| ReactNode	-	It is used to specify a label for an element of a form. Support html tags	-
`name`	string	-	Name is not deprecated when used with form fields.	-
`shape`	string	`circle` \| `rounded`	Set shape of this control.	-
`disabled`	boolean	false	Whether it is disabled	-
`required`	boolean	false	When present, it specifies that a field must be filled out before submitting the form.	-
`onChange`	function	-	Call a function when the value of an HTML element is changed. It returns only one callback value which is the Control Event (Event)	-
`onBlur`	function	-	Call a function when a user leaves an form field. It returns only one callback value which is the Control Event (Event)	-
`onFocus`	function	-	Call a function when an form field gets focus. It returns only one callback value which is the Control Event (Event)	-
`onClear`	function	-	Clicking the empty button is triggered. It returns only one callback value which is the Control Event (Event)	-

It accepts all props which this control support. Such as style, data-*, tabIndex, id, and so on.