LgColorPickerBox

LgColorPickerBox allows you to select a color from a dropdown palette or enter a custom color (CSS name or hexadecimal code). It inherits from LgTextBox: the bound value is a string, normalized to uppercase hexadecimal format (#RRGGBB).

<LgColorPickerBox Label="#Color" @bind-Value="_model.Color" />

• Namespace: Lagoon.UI.Components
• Inherits from: LgTextBox → LgInputRenderBase<string> → LgInputBase<string> → LgAriaComponentBase → LgComponentBase
• Interfaces: ILgDropDownComponent
• NuGet package: Lagoon.UI

Usage

Demonstration

Try this component in the Lagoon showcase.

Selection from the palette

Without parameters, the proposed palette is the one from the application behavior configuration. The input accepts a CSS name (red), a full hexadecimal code (#FF0000), short (#f00) or without # (f00) — the value is always normalized to #RRGGBB.

TagColorPage.razor

<LgColorPickerBox Label="#TagColor" @bind-Value="_model.Color" />

TagColorPage.razor.cs

public partial class TagColorPage : LgPage
{
    private readonly TagVm _model = new();

    private sealed class TagVm
    {
        public string Color { get; set; }
    }
}

Field-specific palette

Palette overrides the application palette for this field.

ThemeColorPage.razor

<LgColorPickerBox Label="#ThemeColor"
                  Palette="_customPalette"
                  @bind-Value="_model.Color" />

ThemeColorPage.razor.cs

public partial class ThemeColorPage : LgPage
{
    // Brand colors: only this color palette is offered to the user.
    private readonly List<string> _customPalette = new() { "#1B6EC2", "#0E7490", "#22B8DD" };

    private readonly ThemeVm _model = new();

    private sealed class ThemeVm
    {
        public string Color { get; set; }
    }
}

The default palette for the entire application is customized in the client behavior configuration (Main of the client project).

Hexadecimal input and error message

ShowInput displays or hides the hexadecimal input field (by default, the application configuration applies). ParsingErrorMessage customizes the message displayed when the value is not a valid color.

BadgeColorPage.razor

@* Strict selection from the palette, without free input. *@
<LgColorPickerBox Label="#BadgeColor"
                  ShowInput="false"
                  @bind-Value="_model.PaletteColor" />

@* Free input with business error message. *@
<LgColorPickerBox Label="#CustomColor"
                  ShowInput="true"
                  ParsingErrorMessage="#InvalidBadgeColor"
                  @bind-Value="_model.CustomColor" />

BadgeColorPage.razor.cs

public partial class BadgeColorPage : LgPage
{
    private readonly BadgeVm _model = new();

    private sealed class BadgeVm
    {
        public string PaletteColor { get; set; }
        public string CustomColor { get; set; }
    }
}

Reacting to value changes

OnChangingAsync (inherited from LgTextBox) is called before the assignment and allows canceling the change (args.Cancel); OnChange is called after.

ChartColorPage.razor

<LgColorPickerBox Label="#SeriesColor"
                  OnChangingAsync="OnColorChangingAsync"
                  @bind-Value="_model.SeriesColor" />

ChartColorPage.razor.cs

public partial class ChartColorPage : LgPage
{
    private readonly ChartVm _model = new();

    // Called before the change: refuses colors already used by another series.
    private Task OnColorChangingAsync(ChangingEventArgs<string> args)
    {
        if (args.NewValue == "#FF0000")
        {
            args.Cancel = true;
            ShowWarning("#ColorAlreadyUsed");
        }
        return Task.CompletedTask;
    }

    private sealed class ChartVm
    {
        public string SeriesColor { get; set; }
    }
}

Properties

All [Parameter] properties of the component, including inherited ones.

Name	Type	Default	Declared in	Description
Palette	List<string>	null	LgColorPickerBox	Colors offered in the palette. If null, the palette from the application configuration is used.
ParsingErrorMessage	string	#lgColorBoxErrFormat	LgColorPickerBox	Error message displayed when the input is not a valid color.
ShowInput	bool?	null	LgColorPickerBox	Displays the hexadecimal input field. If null, the application configuration applies.
AllowResize	bool	false	LgTextBox	Allows resizing when TextMode is TextBoxMode.Multiline.
AutoComplete	bool	false	LgTextBox	Enables browser autocomplete if true; otherwise the autocomplete="off" attribute is rendered.
AutoUnmask	bool	false	LgTextBox	Returns the value without the mask when InputMask is used.
ClearIncomplete	bool	false	LgTextBox	Clears the value if the input mask is incomplete.
DataList	List<string>	null	LgTextBox	List of values used to render a datalist associated with the input.
InputMask	string	null	LgTextBox	Input mask applied to the text field.
InputMaskKind	InputMaskKind	None	LgTextBox	Type of input mask.
MaxLength	int?	null	LgTextBox	Maximum number of characters.
MaxRows	int?	null	LgTextBox	Maximum number of rows when TextMode is TextBoxMode.Multiline.
MinRows	int?	null	LgTextBox	Minimum number of rows when TextMode is TextBoxMode.Multiline.
OnChangeDisabled	bool	false	LgTextBox	Disables the native onchange handler of the field.
OnChangingAsync	Func<ChangingEventArgs<string>, Task>	null	LgTextBox	Callback called before the value changes; the change can be canceled there.
OnFocus	EventCallback<FocusEventArgs>	—	LgTextBox	Callback called when the field receives focus.
OnInput	EventCallback<ChangeEventArgs>	—	LgTextBox	Callback called on input (oninput).
OnKeyUp	EventCallback<KeyboardEventArgs>	—	LgTextBox	Callback called when a key is released.
Placeholder	string	"red, #FF0000, #f00, f00, ..."	LgTextBox	Hint text for the hexadecimal input field.
Rows	int?	null	LgTextBox	Number of rows when TextMode is TextBoxMode.Multiline.
TextMode	TextBoxMode?	null	LgTextBox	Text field mode. Leave null for the color picker.
Prefix	string	null	LgInputRenderBase	Prefix displayed in the field.
PrefixType	InputLabelType	Text	LgInputRenderBase	Nature of the prefix.
Suffix	string	null	LgInputRenderBase	Suffix displayed in the field.
SuffixType	InputLabelType	Text	LgInputRenderBase	Nature of the suffix.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgInputBase	Additional HTML attributes applied to the rendered element.
AutoFocus	bool	false	LgInputBase	Gives focus to the field on first render.
ConfirmationMessage	string	null	LgInputBase	Confirmation message displayed before applying a value change.
Container	IInputContainer<string>	null	LgInputBase	Internal use: attaches a GridView cell to the field.
CssClass	string	null	LgInputBase	Additional CSS classes.
Disabled	bool	false	LgInputBase	Disables the field.
DisplayName	string	null	LgInputBase	Field name used in error messages.
HideValidationMessage	bool	false	LgInputBase	Hides the validation message below the field.
Label	string	null	LgInputBase	Field label.
LabelContent	RenderFragment	null	LgInputBase	Custom content for the label area.
OnChange	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback called after the value changes.
OnReset	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback called when the field is reset by the clear button.
PolicyEdit	string	null	LgInputBase	Policy required to edit the field.
PolicyVisible	string	null	LgInputBase	Policy required to display the field.
ReadOnly	bool	false	LgInputBase	Displays the color as read-only.
Required	bool?	null	LgInputBase	Required field. If null, inferred from the [Required] attribute of the bound property. A required field does not show the clear button.
ResetButton	bool?	null	LgInputBase	Displays the clear button. If null, the application behavior configuration applies.
ResetText	string	null	LgInputBase	Text of the clear button.
ResetTextAriaLabel	string	null	LgInputBase	Accessible label (aria-label) of the clear button.
Tooltip	string	null	LgInputBase	Tooltip.
TooltipIsHtml	bool	false	LgInputBase	Indicates whether the Tooltip content is in HTML format (otherwise plain text).
Value	string	null	LgInputBase	Bound color (@bind-Value), normalized to #RRGGBB format.
ValueChanged	EventCallback<string>	—	LgInputBase	Callback for updating the bound value.
ValueExpression	Expression<Func<string>>	—	LgInputBase	Expression identifying the bound property.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Cascading parameters

LgColorPickerBox also consumes parameters automatically provided by ancestor components (you don't need to set them): ParentAuthorizeView (LgAuthorizeView) and the edit context from a parent LgEditForm.

Events

Event	Type	Description
OnChangingAsync	Func<ChangingEventArgs<string>, Task>	Before the color changes; args.Cancel = true cancels the change.
OnChange	EventCallback<ChangeEventArgs>	After the color changes.
OnFocus	EventCallback<FocusEventArgs>	When the field receives focus.
OnReset	EventCallback<ChangeEventArgs>	When the field is reset by the clear button.

Best practices / Accessibility

• Store the normalized #RRGGBB value as is: the component produces it in uppercase, regardless of the input format.
• ShowInput="false" limits the user to the palette: combine it with Palette to enforce a color palette.

Complete reference

All parameters (including inherited ones): API Reference — LgColorPickerBox.

Related components

• LgTextBox — basic text field.
• LgGridColorColumn — color column in a LgGridView.