Color Picker

An enterprise-level color picker component that supports multiple formats, opacity adjustment, and seamless integration with BrFormItem.

Basic Usage

Provides basic color selection capabilities.

Example

Preset Colors

You can provide an array of commonly used preset colors for quick selection.

Example

Format & Opacity

Supports opacity adjustment and switching between multiple formats such as hex, rgba, hsla, etc.

Example

Inline Mode

In addition to the default popover mode, it also supports displaying the color picker panel directly inline.

Example

Form Integration

Seamlessly integrates with BrFormItem, supporting color value binding and validation state synchronization.

Example

Theming

Combined with BrConfigProvider, you can easily achieve global and local theme style customization.

Example

API

Props

Name	Type	Default	Description
modelValue	string	undefined	The bound color value
defaultValue	string	undefined	The default color value
mode	'popover' | 'inline'	'popover'	The display mode
format	'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv'	'hex'	The color format
showAlpha	boolean	false	Whether to show the opacity adjustment slider
presets	string[]	undefined	An array of preset colors
presetCols	number	8	The number of columns for the preset color panel
presetGap	number | string	8	The gap between preset colors
disabled	boolean	false	Whether the color picker is disabled
readonly	boolean	false	Whether the color picker is readonly
validationState	'success' | 'warning' | 'error' | 'default'	'default'	Validation state (automatically synchronized with form)
clearable	boolean	false	Whether to show the clear button
placeholder	string	'Select color'	The placeholder text

Emits

Name	Parameters	Description
update:modelValue	(value: string | undefined)	Triggered when the bound value is updated
change	(value: string | undefined)	Triggered when the color changes
clear	()	Triggered when the clear button is clicked