Color Picker
A complete color picking surface in a popover.
1use herogpui::components::color_picker::ColorPicker;Usage
The panel flips near window edges and scrolls to keep the alpha control reachable in short windows.
1use herogpui::prelude::{ColorPicker, PickerColor};
2
3ColorPicker::new("color-picker-main", value)
4 // v3's Usage is uncontrolled; "Controlled" is separate.
5 .default_value(value)
6 .label("Accent")
7 .show_alpha(true)
8 .on_change(color_cb(cx.listener(|this, c: &PickerColor, _, cx| {
9 this.picker_color = *c;
10 cx.notify();
11 })))Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
ColorPicker
Color Picker is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Color Picker uses.
Styling
| Style | Description |
|---|---|
relative + flex_col + gap(8) | The Rust root also establishes a relative column and optional eight-pixel label gap around its monolithic composition. |
flex row + gap(12) + hairline_radius + 14px | Trigger alignment, 12px gap, 4px radius, and 14px/20px type match regardless of parent line height. |
cursor_pointer | Enabled triggers use the interactive pointer cursor. |
ring_if_focused | Keyboard focus uses theme status ring. |
disabled_opacity + no listeners | Disabled opacity and pointer suppression match. |
min_w(248) + px/pt(8) + pb/gap(12) | The 248px minimum, 8px horizontal/top inset, 12px bottom inset and gap, and overlay fill match. |
scrollable_popover + max_h_full + overflow_y_scroll | The panel hides horizontal overflow and scrolls vertically within the available viewport height without shrinking its controls; Tab reveals each slider and boundary scrolling never moves the page, and scrollbars are not drawn. |
layout.capped(radius_lg * 2.5) + overlay_shadow | Theme-derived 2.5x radius and overlay shadow match, including the optional dark inset hairline. |
anim::entering_zoom(Motion::LIST_IN) | Duration, curve, fade, and scale match; the placement-specific four-pixel translation is not animated. |
anim::exiting(Motion::LIST_OUT) | Exit lifetime, curve, opacity, and scale match and reduced motion snaps them. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
new( | id, | — | Controlled color value; owner acceptance drives the next frame. |
default_value( | PickerColor | — | Seeds the picker-owned color once. |
on_change( | Fn( | — | Reports changes from the area and each rendered slider. |
label / show_alpha | AnyElement | — | The Rust root renders a fixed trigger, area, hue slider, optional alpha slider, and readout rather than arbitrary compound children. |
built-in trigger | AnyElement | | — | The trigger is the fixed swatch and hexadecimal value and does not delegate Button render state. |
is_disabled( | bool | false | Inherited Button state disables the trigger and suppresses the panel. |
placement( | Placement | Placement:: | Positions and flips the floating panel to the side with more room when the preferred side cannot fit through the shared placement engine, keeping a 12px cross-axis viewport inset with the scroller capped to the available height. |
built-in popover content | AnyElement | — | The built-in area, sliders, and hexadecimal readout cannot be replaced independently. |
Parts
| Part | Description |
|---|---|
ColorPicker | Color-value and internal DialogTrigger state owner. |
ColorPicker | Focusable swatch and hexadecimal-value trigger with fixed content. |
ColorPicker | Dismissible floating color controls with fixed built-in children. |
States
| Builder | State | Description |
|---|---|---|
internal keyed state / is_open | Open | The default trigger owns open state; Rust's composition-only is_open builder reports without mutating until its owner accepts the change. |
tab_stop_handle | Focused | The trigger participates in tab order and regains focus after dismissal. |
ring_if_focused | Focus visible | Keyboard focus draws the status ring. |
trigger_pressed dismissal guard | Pressed | Press tracking protects outside dismissal but is not delegated to trigger content. |
is_disabled | Disabled | The trigger dims, leaves pointer interaction, and suppresses its panel. |
Motion::LIST_IN | Entering | Panel fades and grows from 95% over 150ms with ease-smooth. |
Motion::LIST_OUT | Exiting | Panel is retained while fading and shrinking to 95% over 100ms. |