Blazorise Color Picker API

Parameter	Default	Type
`Animated`	`true`	`bool`
Enables the opening animation supplied by the CSS provider. Set to false to open immediately.
`AnimationDuration`	`null`	`int?`
Overrides the provider's opening animation duration, in milliseconds. Null preserves the provider's default. Zero or a negative value disables the animation.
`AriaDescribedBy`	—	`string`
Specifies the aria-describedby attribute value. When set, this value is rendered as-is and overrides help and validation message ids generated by Field and Validation.
`AriaInvalid`	—	`string`
Specifies the aria-invalid attribute value. When set, this value is rendered as-is and overrides the validation-derived aria-invalid state.
`AriaLabelledBy`	—	`string`
Specifies the aria-labelledby attribute value. When set, this value is rendered as-is. Some non-labelable controls can otherwise derive it automatically from a parent FieldLabel or FieldsLabel.
`AriaRequired`	`false`	`bool`
Specifies the aria-required attribute value. When set, this value overrides the required-field state resolved from the parent Validation.
`Autofocus`	`false`	`bool`
Set's the focus to the component after the rendering is done.
`ChildContent`	`null`	`RenderFragment`
Specifies the content to be rendered inside this ColorPicker.
`Disabled`	`false`	`bool`
Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.
`Feedback`	`null`	`RenderFragment`
Placeholder for validation messages.
`HideAfterPaletteSelect`	`true`	`bool`
Automatically hides the dropdown menu after a palette color is selected.
`Inline`	`false`	`bool`
Displays the picker directly in the page without the popup toggle. The picker remains visible after interaction.
`Mode`	`Square`	`ColorPickerMode`
Gets or sets the color selection mode. The wheel includes a separate brightness slider. Possible values:`SquareWheel`
`Palette`	`new[] { "rgba(244, 67, 54, 1)", "rgba(233, 30, 99, 0.95)", "rgba(156, 39, 176, 0.9)", "rgba(103, 58, 183, 0.85)", "rgba(63, 81, 181, 0.8)", "rgba(33, 150, 243, 0.75)", "rgba(3, 169, 244, 0.7)", "rgba(0, 188, 212, 0.7)", "rgba(0, 150, 136, 0.75)", "rgba(76, 175, 80, 0.8)", "rgba(139, 195, 74, 0.85)", "rgba(205, 220, 57, 0.9)", "rgba(255, 235, 59, 0.95)", "rgba(255, 193, 7, 1)", }`	`string[]`
List a colors below the colorpicker to make it convenient for users to choose from frequently or recently used colors.
`PickerLocalizer`	`null`	`TextLocalizerHandler`
Function used to handle custom localization that will override a default ITextLocalizer.
`PreviewContent`	`null`	`RenderFragment`
Replaces the color swatch in the closed picker with custom content, such as an icon. The content opens the color picker when activated. Use non-interactive content and supply an accessible name for the picker. ShowValue independently controls the selected color text. When omitted, the default swatch is displayed.
`ReadOnly`	`false`	`bool`
Add the readonly boolean attribute on an input to prevent modification of the input’s value.
`ShowCancelButton`	`true`	`bool`
Controls the visibility of the cancel buttons.
`ShowClearButton`	`true`	`bool`
Controls the visibility of the clear buttons.
`ShowHueSlider`	`true`	`bool`
Controls the visibility of the hue slider.
`ShowInputField`	`true`	`bool`
Controls the visibility of the textbox which shows the selected color value.
`ShowOpacitySlider`	`true`	`bool`
Controls the visibility of the opacity slider.
`ShowPalette`	`true`	`bool`
Controls the visibility of the palette below the colorpicker to make it convenient for users to choose from frequently or recently used colors.
`ShowSaveButton`	`true`	`bool`
Controls the visibility of the save button that confirms the selected color and closes the popup. Inline pickers remain visible and use the saved color as the Cancel restore point.
`ShowValue`	`true`	`bool`
Controls the visibility of the selected color value beside the swatch in the closed picker.
`Size`	`Default`	`Size?`
Sets the size of the input control. When omitted, uses the parent Addons size, then the theme input size, then Size.Default.
`TabIndex`	`null`	`int?`
If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.
`Value`	`null`	`TValue`
Specifies the value inside the input field.
`ValueExpression`	`null`	`Expression<Func<TValue>>`
Specifies an expression that identifies the input value.

Event	Type
`Blur`	`EventCallback<FocusEventArgs>`
The blur event fires when an element has lost focus.
`CustomValidationValue`	`Func<TValue>`
Used to provide custom validation value on which the validation will be processed with the Validator handler. Should be used carefully as it's only meant for some special cases when input is used in a wrapper component, like Autocomplete or SelectList.
`FocusIn`	`EventCallback<FocusEventArgs>`
Notifies when the input box gains focus.
`FocusOut`	`EventCallback<FocusEventArgs>`
Notifies when the input box loses focus.
`KeyDown`	`EventCallback<KeyboardEventArgs>`
Notifies when a key is pressed down while the control has focus.
`KeyPress`	`EventCallback<KeyboardEventArgs>`
Notifies when a key is pressed while the control has focus.
`KeyUp`	`EventCallback<KeyboardEventArgs>`
Notifies when a key is released while the control has focus.
`OnFocus`	`EventCallback<FocusEventArgs>`
Notifies when the input box gains or loses focus.
`ValueChanged`	`EventCallback<TValue>`
Occurs after value has changed.

Method	Return	Parameters
`Hide`	`Task`	—
Closes the color picker popup. Inline pickers remain visible.
`Select`	`Task`	`bool focus`
Select all text in the underline component.
`SetValue`	`Task`	`string value`
Updates the picker with a new color value.
`Show`	`Task`	—
Opens the color picker when the input is enabled and editable.
`Show`	`Task`	`string targetId`
Opens the color picker against the specified target, outside its containing menu.
`Focus`	`Task`	`bool scrollToElement`
Sets the focus on the underline element.
`Revalidate`	`Task`	—
Forces the Validation (if any is used) to re-validate with the new custom or internal value.

Blazorise Color Picker API

API

Parameters

Events

Methods

On this page