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.



In this example for Blazorise, the ColorEdit component is utilized to provide a color selection interface. It's bound to a colorValue variable via the @bind-Color directive. Initially set to red (#ff0000, this colorValue automatically updates to reflect the user's color selection made through the ColorEdit component, showcasing a straightforward way to integrate color picking functionality into a Blazor application.
<ColorEdit @bind-Color="@colorValue" />
@code {
    string colorValue = "#ff0000";


In the provided example, two ColorEdit components in a Blazorise application are showcased, each with a distinct Size attribute. The first ColorEdit is configured with Size="Size.Small", making it smaller in appearance, and the second is set with Size="Size.Large", resulting in a larger size. This demonstrates the flexibility of the ColorEdit component in Blazorise, where the Size attribute can be adjusted to control the component's display size according to the application's design requirements.
    <ColorEdit Color="#888888" Size="Size.Small" />
    <ColorEdit Color="#444444" Size="Size.Large" />


In this Blazorise example, the ColorEdit component is demonstrated with the Disabled attribute. The addition of the Disabled attribute renders the ColorEdit component non-interactive, meaning the user will not be able to change the color value presented. This is useful in scenarios where you want to display a color but prevent any user interaction, such as in view-only forms or to maintain consistency in certain UI states.
<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