# ColorPicker

Source: https://lumeo.nativ.sh/components/color-picker

# ColorPicker

A color selection dropdown with swatch grid, hue/lightness sliders, hex input, and optional presets.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

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

Preview Code

Basic

#3b82f6

Preview Code

With Presets

#ef4444

Preview Code

With Alpha

#22c55e

Preview Code

Disabled

#6366f1

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

## Related Components

-   [Input](/components/input) — Text input for manual hex or RGB color entry
-   [Popover](/components/popover) — The underlying overlay mechanism used by ColorPicker
-   [Form](/components/form) — Integrate ColorPicker into validated form layouts