Blazorise ColorEdit component

The ColorEdit allow the user to select a color.

This component works with standard <input type="color"> elements. That is, the browser will control the look and feel, which may differ between Chrome, Firefox, and Edge.



Use the Color attribute to set an initial value for the color picker.
<ColorEdit @bind-Color="@colorValue" />
@code {
    string colorValue = "#ff0000";


Use the Size attribute to change the color picker's size.
    <ColorEdit Color="#888888" Size="Size.Small" />
    <ColorEdit Color="#444444" Size="Size.Large" />


To disable ColorEdit just define a Disabled parameter.
<ColorEdit Color="#888888" Disabled />



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>
Disabled Prevents user interactions and make it appear lighter. bool false
Size Component size variations. Size Default
On this page