Color Swatch Picker
Choose from a predefined set of colors.
1use herogpui::components::color_picker::ColorSwatchPicker;Usage
1use herogpui::prelude::{ColorSwatchPicker, PickerColor, SizeXl};
2use gpui::prelude::*;
3use gpui::px;
4
5gpui::div()
6 .flex()
7 .flex_col()
8 .items_start()
9 .gap(px(12.))
10 .children(vec![
11 ColorSwatchPicker::new("color-swatch-picker-main", palette())
12 .value(selected)
13 .size(SizeXl::Lg)
14 .on_change(color_cb(cx.listener(|this, c: &PickerColor, _, cx| {
15 this.swatch_selected = *c;
16 cx.notify();
17 })))
18 .into_any_element(),
19 para(&format!("Selected: {}", selected.to_hex()), cx),
20 ])Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
ColorSwatchPicker
Color Swatch Picker is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Color Swatch Picker uses.
Styling
| Style | Description |
|---|---|
flex + items_center + gap(8) + flex_wrap + max_w(280) | Grid alignment, eight-pixel gap, wrapping, and 280px desktop cap match. |
flex_col + Up/Down navigation | Stack layout is vertical and its keyboard direction follows the visual axis. |
SizeXl::swatch_px + border_width | Every size drives paint, hit testing, indicator size, wrapping, and grid stride. |
item_radius + inner radius | Pinned item and inner-swatch radii match, including the selected small-square exception. |
computed inner edge + hover size | Final geometry and selected-over-hover precedence match; interpolation is not implemented. |
indicator / CHECK | Position, size, and luminance contrast match; custom content uses the same centered owner. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
value( | PickerColor | — | Controlled selection changes only when the owner supplies the reported color. |
default_value( | PickerColor | — | Seeds picker-owned selection once. |
on_change( | Fn( | — | Reports pointer and keyboard selection changes. |
size( | SizeXl | SizeXl:: | Drives item edge, border, radius, indicator, hit geometry, wrapping, and grid navigation stride. |
shape( | SwatchShape | SwatchShape:: | Selects the per-size item and swatch radii. |
layout( | SwatchLayout | SwatchLayout:: | Grid wraps and uses geometric row navigation; stack is vertical and uses Up/Down. |
new( | id, | — | The Rust constructor receives a concrete palette and composes one item per color. |
new( | id, | required | Each palette color is supplied by index and reaches item render state. |
disabled_keys( | bool | false | Per-index disabled items dim, leave navigation, and mask interaction state. |
item_content( | AnyElement | | Swatch + Indicator | Replacement content receives color, hover, press, selection, focus, focus-visible, and disabled state. |
indicator( | AnyElement | | checkmark | Replacement indicator content receives the complete item state. |
Parts
| Part | Description |
|---|---|
ColorSwatchPicker | Selection owner and wrapping grid or vertical stack. |
ColorSwatchPicker | Stable focus, pointer, selection, and render-state owner. |
ColorSwatchPicker | Checkerboard-backed color visual with selected and hover geometry. |
ColorSwatchPicker | Centered selected marker with luminance-aware default color or caller content. |
States
| Builder | State | Description |
|---|---|---|
interaction + item_content | Hovered | Enabled unselected swatches grow to 1.1 and item content receives hover. |
interaction + item_content | Pressed | Enabled item content receives live pointer and keyboard press state. |
resolved value + item_content / indicator | Selected | The color border is revealed by a 0.77 inner swatch and item/indicator state updates. |
cursor + tab_stop_handle | Focused | Exactly one enabled item owns the roving focus handle. |
with_focus_ring + item_content | Focus visible | Keyboard-origin focus draws the shared ring and reaches item state. |
is_disabled / disabled_keys | Disabled | Whole-picker and per-item disabling dim, suppress events, remove navigation stops, and mask state. |