ColorPicker
A color selection dropdown with swatch grid, hue/lightness sliders, hex input, and optional presets.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <ColorPicker />
When to Use
- Color selection for theme customization or branding settings
- Design tools where users pick colors for text, backgrounds, or borders
- Preset color swatches for quick selection with an option for custom values
- Any form field requiring a visual color input with hex value output
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
| Value | string? | null | Selected color hex value. |
| ShowAlpha | bool | false | Show opacity slider. |
| Presets | List<string>? | null | Predefined color swatches to display. |
| Disabled | bool | false | Disable the picker. |
| Open | bool | false | Controls dropdown open state. |
| ValueChanged | EventCallback<string> | — | Two-way binding callback; fires when the color changes. |
| OpenChanged | EventCallback<bool> | — | Two-way binding callback for the popover open state. |
| Required | bool | false | Marks the field as required. Syncs with a parent FormField. |
| Invalid | bool | false | Applies error styling. Syncs with a parent FormField. |
| ErrorText | string? | null | Error message displayed below the field when Invalid is true. |
| HelperText | string? | null | Helper text shown below the field when not invalid. |
| Label | string? | null | Label rendered above the field (standalone, without FormField). |
| Name | string? | null | HTML name attribute for form submission. |
| FormField | FormField.FormFieldContext? | null | Cascaded context from a parent FormField; wires label, validation, and required state automatically. |
| IsOpen | bool | false | Obsolete alias for Open; will be removed in a future release. |
| IsOpenChanged | EventCallback<bool> | — | Obsolete alias for OpenChanged; will be removed in a future release. |