Blazorise ColorInput component

The ColorInput 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

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

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

Sizes

In the provided example, two ColorInput components in a Blazorise application are showcased, each with a distinct Size attribute. The first ColorInput 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 ColorInput component in Blazorise, where the Size attribute can be adjusted to control the component's display size according to the application's design requirements. 
<Field>
    <ColorInput Value="#888888" Size="Size.Small" />
</Field>
<Field>
    <ColorInput Value="#444444" Size="Size.Large" />
</Field>

Disabled

In this Blazorise example, the ColorInput component is demonstrated with the Disabled attribute. The addition of the Disabled attribute renders the ColorInput 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. 
<ColorInput Value="#888888" Disabled />

Best Practices

Color Purpose

Provide a visible label that explains what the color controls instead of relying on the preview alone. Show the selected value as text when users need to copy, compare, or enter an exact color.

Color and Context

Pair status colors with text, icons, or patterns so the meaning remains understandable to users who cannot distinguish the colors. Validate and normalize the selected value before storing it or applying it to generated styles.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page