Color picker

Bootstrap 5 Color picker plugin

Color Picker plugin allows you to select different colors. You can successfully use it in various product wizards, clothing sales, or other situations where you need to be able to choose a color.

Note: Read the API tab to find all available options and advanced customization

Native color picker

If you need the simplest form - use a native color picker.

        
            
        import React from 'react';

        export default function App() {
          return (
            <>
              <label htmlFor="exampleColorInput" className="form-label">Color picker</label>
              <input type="color" className="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
            </>
          );
         }

Advanced color picker - basic example

The Advanced Color Picker can be placed anywhere on the page. You can initialize it using <MDBColorPicker />. 

        
            
        import React from 'react';
        import { MDBColorPicker } from 'mdb-react-color-picker';

        export default function App() {
          return (
            <MDBColorPicker />
          );
        }

Disable state example

To add a Color picker as read-only pass disabled as prop. 

        
            
            import React from 'react';
            import { MDBColorPicker } from 'mdb-react-color-picker';
    
            export default function App() {
              return (
                <MDBColorPicker disabled />
              );
            }

Swatches

You can add ready-made samples for the user. Use the swatchesColor option and pass an array of colors as a parameter. If you want to add colors in several columns, add them in separate tables. 

        
            
import React from 'react';
import { MDBColorPicker } from 'mdb-react-color-picker';

export default function App() {
  const exampleColors = [
    ['#0d6efd', '#6610f2', '#6f42c1 ', '#b23cfd', '#d63384', '#dc3545', '#fd7e14', '#ffc107'],
    ['#198754', '#20c997', '#0dcaf0', '#39c0ed', '#757575', '#4f4f4f', '#262626', '#000'],
  ]

  return (
    <MDBColorPicker swatchesColor={exampleColors} />
  );
}

Swatches Height

If the defined samples take up a lot of space, you can set their maximum height using the swatchesHeight option. 

        
            
import React from 'react';
import { MDBColorPicker } from 'mdb-react-color-picker';

export default function App() {
  const exampleColors = [
    ['#0d6efd', '#6610f2', '#6f42c1 ', '#b23cfd', '#d63384', '#dc3545', '#fd7e14', '#ffc107'],
    ['#198754', '#20c997', '#0dcaf0', '#39c0ed', '#757575', '#4f4f4f', '#262626', '#000'],
  ]

  return (
    <MDBColorPicker swatchesColor={exampleColors} swatchesHeight={100} />
  );
}

Default value

To set the default value use the defaultColor option. 

        
            
            import React from 'react';
            import { MDBColorPicker } from 'mdb-react-color-picker';
    
            export default function App() {
              return (
                <MDBColorPicker defaultColor="rgba(15,219,104,1)" />
              );
            }

Dropdown

You can use color picker as dropdown, just pass dropdown as prop. 

        
            
            import React from 'react';
            import { MDBColorPicker } from 'mdb-react-color-picker';
    
            export default function App() {
              return (
                <MDBColorPicker dropdown />
              );
            }

Disable section

If you want to use only some picker elements you can disable unnecessary elements. The following example shows the use of the colorPalette option. Other options can be found in the API tab. 

        
            
            import React from 'react';
            import { MDBColorPicker } from 'mdb-react-color-picker';
    
            export default function App() {
              return (
                <MDBColorPicker colorPalette={false} />
              );
            }

Color Picker - API

Import

        
            
            import { MDBColorPicker } from 'mdb-react-color-picker';

Properties

MDBColorPicker

Name Type Default Description Example
changeFormatBtn boolean true Set false to hide the change color type icons <MDBColorPicker changeFormatBtn={false} />
colorPalette boolean true Set false to hide color palette <MDBColorPicker colorPalette={false} />
copyIcon boolean true Set false to hide copy code icon <MDBColorPicker copyIcon={false} />
defaultColor string '' Set default color value <MDBColorPicker defaultColor='rgba(0,0,255,1)' />
disabled boolean false Set true to use read-only Color picker <MDBColorPicker disabled />
disabledAlpha boolean false Set true to disable the alpha range input <MDBColorPicker disabledAlpha />
disabledHue boolean false Set true to disable the hue range input <MDBColorPicker disabledHue />
dropdown boolean false Set true to use color picker as dropdown <MDBColorPicker dropdown />
inputSection boolean true Set false to hide the input sections <MDBColorPicker inputSection={false} />
swatchesColor string[][] - Allows you to define the colors of the swatches. The main array represents several rows, and sub-arrays are defined colors. <MDBColorPicker swatchesColor={[['#0d6efd'],['#6610f2']]} />
swatchesHeight number - Allow you to define swatches max height <MDBColorPicker swatchesHeight={100} />

Events

Name Type Description
onColorChange (value: any) => any Returns an object with all color types and values.