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. |