Blazorise ColorPicker component

The ColorPicker allow the user to select a color using a variety of input methods.

ColorPicker component is based on a Pickr library and as such is not a native color input element. That means that unlike ColorEdit which will render <input type="color">, ColorPicker will render span element.

Examples

Basic

In this Blazorise example, a ColorPicker component is bound to a colorValue variable using the @bind-Color directive. Initially set to red (#ff0000), the colorValue updates automatically when a user selects a new color through the ColorPicker, demonstrating an interactive color selection tool in a Blazor application. 
<ColorPicker @bind-Color="@colorValue" />

@code {
    string colorValue = "#ff0000";
}

Show Hue Slider

In this Blazorise example, the ColorPicker component is enhanced with a hue slider, as indicated by the ShowHueSlider attribute. 
<ColorPicker @bind-Color="@colorValue" ShowHueSlider />

@code {
    string colorValue = "#ff00ff";
}

API

Attributes

Name Description Type Default
Color Gets or sets the input color value in hex format. string null
ColorChanged Occurs when the color has changed. EventCallback<string>
Palette List a colors below the colorpicker to make it convenient for users to choose from frequently or recently used colors. string[]
ShowPalette Controls the visibility of the palette below the colorpicker to make it convenient for users to choose from frequently or recently used colors. bool true
HideAfterPaletteSelect Automatically hides the dropdown menu after a palette color is selected. bool true
ShowClearButton Controls the visibility of the clear buttons. bool true
ShowCancelButton Controls the visibility of the cancel buttons. bool true
ShowOpacitySlider Controls the visibility of the opacity slider. bool true
ShowHueSlider Controls the visibility of the hue slider. bool false
ShowInputField Controls the visibility of the textbox which shows the selected color value. bool true
On this page