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 />

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