TextBox (Blazor)
This article demonstrates how to use the ColorPicker component. Check also the component guide and API reference.
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. |