# Color Picker

The ColorPicker component provides a native browser widget for selecting colors. It is part of the Tesserae UI library's Components group and is ideal when you need to allow users to choose colors in your application. By default, it displays black unless a different preset color is specified. The component supports programmatically setting its value and validating user input.

Instantiate the ColorPicker using the Tesserae.UI static helper method. You can either create a basic ColorPicker or specify a preset color by providing a Color argument. The component exposes a Color property for getting or setting the current color, and a SetColor method to update the color, which in turn updates the displayed hex value.

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

var colorPicker = ColorPicker();
colorPicker.OnChange((sender, args) =>
{
    Console.WriteLine($"Selected color: {colorPicker.Text}");
});

• SetColor(Color color)
  • Parameter: color (Color) – The new color to set, provided as a Color object.
  • Description: Updates the component by converting the provided color to its hexadecimal string format and setting it as the current value.

• Color (Color)
  • Get: Retrieves the current color selected by the ColorPicker as a Color object.
  • Set: Sets the current color by updating the component's hex value via the provided Color instance.

The following sample demonstrates how to instantiate the ColorPicker component, attach an event handler to update another component's background based on the selected color, and display the currently selected value when a button is clicked.

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

public class ColorPickerDemo : IComponent
{
    public HTMLElement Render()
    {
        // Create a ColorPicker
        var colorPicker = ColorPicker();

        // Create a Button to react to color changes
        var button = Button().SetText("Click me!");

        // Update the button background whenever the color changes
        colorPicker.OnChange((sender, args) =>
        {
            button.Background = colorPicker.Text;
        });

        // On button click, display an alert with the current color information
        button.OnClick((sender, args) =>
        {
            window.alert($"{colorPicker.Text}, {colorPicker.Color.ToHex()}");
        });

        // Assemble the UI components in a vertical stack
        return Stack().Children(
            Label("Select a color:"),
            colorPicker,
            button
        ).Render();
    }
}

• Button
• Label