ColorPicker

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="color-picker-presets" MaxWidth="20.Rem" Grow>
    <ColorPicker @bind-Value="Model!.Brand" Presets="BrandColors.Keys" PresetText="hex => BrandColors[hex]" Hint="Used for buttons, links and focus rings." />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "color-picker-presets")]
    private Branding? Model { get; set; }

    // Each preset's name, which screen readers hear instead of its hex value. In order.
    private static readonly OrderedDictionary<string, string> BrandColors = new()
    {
        ["#2563eb"] = "Blue", ["#4f46e5"] = "Indigo", ["#7c3aed"] = "Violet", ["#0f766e"] = "Teal",
        ["#15803d"] = "Green", ["#be123c"] = "Rose", ["#ea580c"] = "Orange", ["#18181b"] = "Black",
    };

    protected override void OnInitialized() => Model ??= new();

    public sealed class Branding
    {
        [Display(Name = "Brand color")]
        public string? Brand { get; set; } = "#2563eb";
    }
}

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="color-picker-label-color" OnValidSubmit="Save" MaxWidth="20.Rem" Grow>
    <TextField @bind-Value="Model!.Name" />
    <ColorPicker @bind-Value="Model!.Color" Presets="Colors" />
    <Row><Button Submit>Save label</Button></Row>
    @if (_saved is { } saved)
    {
        <Row Gap="2" Align="Align.Center">
            <TextBlock Size="TextSize.Sm">Saved:</TextBlock>
            <Box Width="1.Rem" Height="1.Rem" Radius="Radius.Sm" Border="1" Style="@($"background: {saved.Color}")" />
            <TextBlock Size="TextSize.Sm">@saved.Name, <Code>@saved.Color</Code></TextBlock>
        </Row>
    }
    else if (_invalid)
    {
        <Alert Status="Status.Danger">That isn't a color.</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "color-picker-label-color")]
    private IssueLabel? Model { get; set; }

    // What was saved, not the fields: on an interactive page they follow each change.
    private (string Name, string Color)? _saved;
    private bool _invalid;

    protected override void OnInitialized() => Model ??= new();

    // The browser sends "#rrggbb", but a crafted post can send any text: normalize it, or turn it away.
    private void Save()
    {
        _saved = ColorValues.NormalizeHex(Model!.Color) is { } color ? (Model.Name!, color) : null;
        _invalid = _saved is null;
    }

    private static readonly string[] Colors = ["#be123c", "#ea580c", "#15803d", "#2563eb", "#7c3aed"];

    public sealed class IssueLabel
    {
        [Required, StringLength(24), Display(Name = "Label name")]
        public string? Name { get; set; } = "Needs review";

        [Display(Name = "Label color")]
        public string? Color { get; set; } = "#ea580c";
    }
}

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="color-picker-states" MaxWidth="20.Rem" Grow>
    <ColorPicker @bind-Value="Model!.Small" Label="Small" Size="ControlSize.Sm" />
    <ColorPicker @bind-Value="Model!.Large" Label="Large" Size="ControlSize.Lg" />
    <ColorPicker @bind-Value="Model!.Highlight" ShowHex="false" Hint="Swatch only, with no hex box." />
    <ColorPicker @bind-Value="Model!.Brand" ReadOnly Hint="Read-only: posted, but can't be changed." />
    <ColorPicker @bind-Value="Model!.Accent" Disabled Hint="Disabled: not posted." />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "color-picker-states")]
    private Palette? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Palette
    {
        public string? Small { get; set; } = "#0f766e";
        public string? Large { get; set; } = "#be123c";
        public string? Highlight { get; set; } = "#fde68a";

        [Display(Name = "Brand color")]
        public string? Brand { get; set; } = "#2563eb";

        [Display(Name = "Accent color")]
        public string? Accent { get; set; } = "#64748b";
    }
}