Color picker

Vue Color Picker

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.

Show code

Advanced color picker - basic example

The Advanced Color Picker can be placed anywhere on the page. You can initialize it by adding advanced prop to the MDBColorPicker component.

Show code

Disable state example

To add a Color picker as read-only use disabled prop in the MDBColorPicker component.

Show code

Swatches

You can add ready-made samples for the user. Put swatches prop in MDBColorPicker component and pass an array of colors in that prop . If you want to add colors in several columns, add them in separate tables.

Show code

Swatches Height

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

Show code

Default value

To set the default value use the defaultValue prop.

Show code

Dropdown

You can use color picker as dropdown, just add dropdown prop to MDBColorPicker.

Show code

Disable section

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

Show code