P11ColorPicker Component

The P11ColorPicker is a native HTML-based color input component. It wraps the standard <input type="color"> element, providing a straightforward and accessible way for users to select colors, with optional display of the hexadecimal value.

Note: This component leverages the browser's native color picker UI, which may vary in appearance across different browsers and operating systems.

Basic Color Picker

A simple color picker with default settings.

Background Color

#007bff

Select a color for the background.

Current Color: #007bff

Implementation


<P11ColorPicker Label="Background Color"
                Description="Select a color for the background."
                @bind-Value="backgroundColor" />
<p>Current Color: @backgroundColor</p>
<div style="width: 50px; height: 50px; background-color: @backgroundColor; border: 1px solid #ccc;"></div>


private string backgroundColor = "#007bff"; // Default blue

Color Picker with Initial Value and No Hex Display

Color picker with a predefined value (`#FF00FF`) and without additional hex display.

Accent Color

Current Color: #FF00FF

Implementation


<P11ColorPicker Label="Accent Color"
                @bind-Value="accentColor"
                ShowHexValue="false" />
<p>Current Color: @accentColor</p>
<div style="width: 50px; height: 50px; background-color: @accentColor; border: 1px solid #ccc;"></div>


private string accentColor = "#FF00FF"; // Magenta

Disabled Color Picker

A disabled color picker.

Disabled Color

#cccccc

Current Color: #cccccc

Implementation


<P11ColorPicker Label="Disabled Color"
                @bind-Value="disabledColor"
                Disabled="true" />
<p>Current Color: @disabledColor</p>
<div style="width: 50px; height: 50px; background-color: @disabledColor; border: 1px solid #ccc;"></div>


private string disabledColor = "#cccccc"; // Grey

Color Picker with Custom CSS and Additional Attributes

Color picker with custom attributes and CSS class. Check this in the browser inspector.

With Extra Attributes

#33cc33

Current Color: #33cc33

Implementation


<P11ColorPicker Label="With Extra Attributes"
                @bind-Value="extraColor"
                @attributes='new Dictionary<string, object> { { "data-custom", "color-data" }, { "tabindex", "5" } }'
                CssClass="my-custom-color-picker-container" />
<p>Current Color: @extraColor</p>
<div style="width: 50px; height: 50px; background-color: @extraColor; border: 1px solid #ccc;"></div>


private string extraColor = "#33cc33"; // Green

Color Picker with ValueChanged Event

Demonstrates how to use the ValueChanged event to react to changes in the selected color.

Monitor Color Changes

#000000

The color below will update when you select a new color.

Selected Color (via Event): #000000

Implementation


<P11ColorPicker Value="@valueChangedColor"
                ValueChanged="@((string ? newColor) = > OnColorChanged(newColor))"
                Label="Monitor Color Changes"
                Description="The color below will update when you select a new color." />
<p>Selected Color (via Event): <span class="fw-bold">@valueChangedColor</span></p>
<div style="width: 50px; height: 50px; background-color: @valueChangedColor; border: 1px solid #ccc;"></div>


private string valueChangedColor = "#000000"; // Default black

private void OnColorChanged(string? newColor)
{
    valueChangedColor = newColor ?? "#000000"; // Handle null if necessary
    Console.WriteLine($"Color changed to: {valueChangedColor}");
}

Component API

Parameter	Type	Default	Description
`Label`	`string?`	`null`	Gets or sets the label text displayed next to the input field.
`Description`	`string?`	`null`	Gets or sets a descriptive text displayed below the input field.
`Disabled`	`bool`	`false`	Gets or sets a value indicating whether the input field is disabled.
`CssClass`	`string?`	`null`	Gets or sets custom CSS classes to be applied to the component's container div.
`ShowHexValue`	`bool`	`true`	Gets or sets whether to display the hexadecimal value of the selected color next to the picker.
`ShowDevelopmentErrors`	`bool`	`true`	Gets or sets a value indicating whether development-time configuration errors should be displayed. Set to `false` for production environments.
`Value`	`string?`	`#000000`	Gets or sets the current selected color as a hexadecimal string (e.g., "#RRGGBB"). Uses two-way binding. Default value is "#000000" if the initial value is null or empty.
`AdditionalAttributes`	`Dictionary<string, object>?`	`null`	Captures all unmatched attributes that are not explicitly defined as component parameters. These attributes are applied to the component's container div.
Events
`ValueChanged`	`EventCallback<string?>`	-	Event callback for when the `Value` changes. Used for two-way binding.