ColorPicker: Blazor color picker component

Examples

Binding

@bind-Value is a hex string such as #e4572e; Disabled locks it.

Brand colour

#e4572e

Default colour (locked)

#2a9d8f

Bound value: #e4572e

website/Examples/DataInput/ColorPickerBasicExample.razor Source

Driving a preview

The bound strings can feed any style, here a logo mock-up.

Background

#f2c14e

Text

#1d3557

Acme Cloud

website/Examples/DataInput/ColorPickerPreviewExample.razor Source

Playground

Brand colour

#e4572e

Label

Value

Disabled

FullWidth

<ColorPicker Label="Brand colour" Value="#e4572e" />

API

<ColorPicker>

DaisyBlazor

Parameters

ColorPickerView ColorPickerView
= ColorPickerView.Spectrum
Accepted for MudBlazor compatibility; currently has no effect.
Disabled bool
= false
Disables the native color input.
FullWidth bool
= true
Stretches the fieldset and input to full width (w-full); defaults to true.
Label string
= null
Optional label text rendered above the input.
PickerVariant PickerVariant
= PickerVariant.Inline
Accepted for MudBlazor compatibility; currently has no effect.
Text string
= null
Selected color as a hex string; takes precedence over Value.
Value string
= null
Alias of Text for @bind-Value; used when Text is null.
Class string
= null
Additional CSS classes merged onto the outer fieldset.
Style string
= null
Inline styles applied to the outer fieldset.

Name	Type	Default	Description
ColorPickerView	ColorPickerView	ColorPickerView.Spectrum	Accepted for MudBlazor compatibility; currently has no effect.
Disabled	bool	false	Disables the native color input.
FullWidth	bool	true	Stretches the fieldset and input to full width (w-full); defaults to true.
Label	string	null	Optional label text rendered above the input.
PickerVariant	PickerVariant	PickerVariant.Inline	Accepted for MudBlazor compatibility; currently has no effect.
Text	string	null	Selected color as a hex string; takes precedence over Value.
Value	string	null	Alias of Text for @bind-Value; used when Text is null.
Class	string	null	Additional CSS classes merged onto the outer fieldset.
Style	string	null	Inline styles applied to the outer fieldset.

Events

TextChanged EventCallback<string>
Raised with the new hex string when the user picks a color (supports @bind-Text).
ValueChanged EventCallback<string>
Raised with the new hex string when the user picks a color (supports @bind-Value).

Name	Type	Description
TextChanged	EventCallback<string>	Raised with the new hex string when the user picks a color (supports @bind-Text).
ValueChanged	EventCallback<string>	Raised with the new hex string when the user picks a color (supports @bind-Value).

From MudColorPicker

ColorPicker keeps MudColorPicker's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.