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.

Examples

Basic

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

Sizes

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

Disabled

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

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