Palette

A color palette picker spanning Tailwind's named hues and shades. Bind it to an Alpine model or host it inside a Select shell; on pick it dispatches a bubbling select-close event with the chosen value.

Default Rendered example

Selected:

Usage Example

<div x-data="{ picked: '' }">
    @palette.Palette(palette.Config{
        ID:          "demo-palette",
        Alpine: &palette.AlpineConfig{Model: "picked"},
        ShowHex:     true,
    })
    <p>Selected: <span x-text="picked || '—'"></span></p>
</div>

Inside a Select Shell

Host the palette inside a Select with Shell: true; the trigger label reflects the picked value via ValueExpr. Add LazyWhen when the full swatch grid should render only after the shell opens.

Inside a Select Shell Rendered example

Inside a Select Shell

<div x-data="{ shellPicked: '' }">
    @selectfield.Select(selectfield.Config{
        ID:             "demo-shell",
        Shell:          true,
        TriggerLeading: paletteShellTriggerSwatch(),
        ValueExpr:      "shellPicked || 'Pick a color'",
    }) {
        @palette.Palette(palette.Config{
            ID:          "demo-shell-palette",
            Alpine: &palette.AlpineConfig{Model: "shellPicked"},
            LazyWhen:    "isOpen",
            ShowHex:     true,
        })
    }
</div>

Restricted Hues

Pass Hues and Shades when a workflow should offer only approved brand choices instead of the full Tailwind palette.

Restricted Hues Rendered example

Restricted Hues

@palette.Palette(palette.Config{
    ID:     "brand-palette",
    Hues:   []string{"purple", "sky", "teal"},
    Shades: []string{"300", "500", "700"},
})

Compact Picker

HideNeutral and HideReset trim the control for required color fields where white, black, and clearing the value are not valid choices.

Compact Picker Rendered example

Compact Picker

@palette.Palette(palette.Config{
    ID:          "compact-palette",
    Hues:        []string{"red", "amber", "green", "blue"},
    Shades:      []string{"400", "600"},
    HideNeutral: true,
    HideReset:   true,
})

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/palette

Open v0.2.7 API

Rating Search