TextBox (Blazor)

This guide demonstrates how to use the ColorPicker component.

Get and set the value

As all Radzen Blazor input components the ColorPicker has a Value property which gets and sets the value of the component. Use @bind-Value to get the user input.

<RadzenColorPicker @bind-Value=@color />
@code {
  string color = "rgb(0, 255, 255)";
}

Predefined colors

By default the ColorPicker allows the user to select from a set of predefined colors (controlled via the ShowColors property). To specify your own set of colors use the RadzenColorPickerItem tag.

<RadzenColorPicker>
  <RadzenColorPickerItem Value="ff2800" />
  <RadzenColorPickerItem Value="fe9300" />
  <RadzenColorPickerItem Value="fefb00" />
  <RadzenColorPickerItem Value="02f900" />
  <RadzenColorPickerItem Value="00fdff" />
  <RadzenColorPickerItem Value="0433ff" />
</RadzenColorPicker>

Note that specifying your own set of colors will replace the default one.

The default list of predefined colors is the following:

<RadzenColorPickerItem Value="ff2800" />
<RadzenColorPickerItem Value="fe9300" />
<RadzenColorPickerItem Value="fefb00" />
<RadzenColorPickerItem Value="02f900" />
<RadzenColorPickerItem Value="00fdff" />
<RadzenColorPickerItem Value="0433ff" />
<RadzenColorPickerItem Value="ff40ff" />
<RadzenColorPickerItem Value="942292" />
<RadzenColorPickerItem Value="aa7942" />
<RadzenColorPickerItem Value="ffffff" />
<RadzenColorPickerItem Value="000000" />
<RadzenColorPickerItem Value="53d5fd" />
<RadzenColorPickerItem Value="73a7fe" />
<RadzenColorPickerItem Value="874efe" />
<RadzenColorPickerItem Value="d357fe" />
<RadzenColorPickerItem Value="ed719e" />
<RadzenColorPickerItem Value="ff8c82" />
<RadzenColorPickerItem Value="ffa57d" />
<RadzenColorPickerItem Value="ffc677" />
<RadzenColorPickerItem Value="fff995" />
<RadzenColorPickerItem Value="ebf38f" />
<RadzenColorPickerItem Value="b1dd8c" />

Properties

Name Type Default Description
Value string null The value of the ColorPicker. Accepts rgb, rgba and hex color format.
Disabled boolean false Specifies whether the component is disabled or not.
Visible boolean true Specifies whether the component is visible or not.
Style string null In-line CSS style.
ShowButton boolean false Specifies whether to display a confirmation button.
ShowHSV boolean true Specifies whether to display the HSV (Hue, Saturation, Value) picker UI.
ShowRGBA boolean true Specifies whether to display the RGBA picker UI.
ShowColors boolean true Specifies whether to display the predefined colors.
HexText string “HEX” Text message displayed below the RGBA textbox which accepts color input in hex format.
RedText string “R” Text message displayed below the RGBA textbox which accepts the red component of a color.
GreenText string “G” Text message displayed below the RGBA textbox which accepts the green component of a color.
BlueText string “B” Text message displayed below the RGBA textbox which accepts the blue component of a color.
AlphaText string “A” Text message displayed below the RGBA textbox which accepts the alpha component of a color.
ButtonText string “OK” Text of the button.

Events

Name Type Description
Change EventCallback The Change event of the ColorPicker. The new value is provided as the event argument.

We are here for you

Making our users happy is always a priority for us.