Tag Group — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::{Tag, TagGroup};
2
3TagGroup::new("tag-group", tags())
4    .label("Skills")

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

TagGroupTag

Tag Group is assembled from these builders. The API reference lists each one.

Customization

Appearance builders and theme tokens Tag Group uses.

Styling

Tag Group styling
Style	Description
`relative + flex_col + gap(4)`	Root positioning, column layout, and four-pixel field-part spacing match.
`relative + flex_wrap + gap(6)`	The tag list wraps with six-pixel gaps.
`description p(4)`	Description inset matches; TagGroup has no error-message slot.
`relative + flex + items_center + gap(4) + small_radius + MEDIUM`	Core geometry and typography match; GPUI has no selectable-text or browser highlight properties.
`metrics(Size) + radius(Size)`	Size paddings, text sizes and explicit line heights match independently of host text styles, including the large 16px radius.
`TagVariant::Default`	Default fill, foreground, and unselected hover token match.
`TagVariant::Surface + SurfaceColor::hover`	Borderless surface fill, foreground, and derived hover token match.
`selected_keys`	Selected and selected-hover semantic tokens match.
`svg size(12) + tag_foreground`	Prefix and remove glyphs use the fixed 12px size and resolved tag foreground.
`12px remove action`	Box size and inherited color match; does not expose the composed CloseButton surface independently.

API reference

Builders

Tag Group builders
Builder	Type	Default	Description
`selection_mode(SelectionMode)`	`SelectionMode`	`SelectionMode::None`	Chooses inert, single, or multiple tag selection.
`selected_keys(keys)`	`Selection`	—	Controlled selected keys; the owner must accept reported changes.
`default_selected_keys(keys)`	`Selection`	—	Seeds the group's uncontrolled selected-key set once.
`on_selection_change(callback)`	`Fn(keys: Selection) -> ()`	—	Reports the complete selected-key set after pointer and keyboard changes.
`disabled_keys(keys)`	`iterable of keys`	—	Removes matching tags from pointer and keyboard interaction.
`is_disabled(bool)`	`bool`	`false`	Disables every tag and remove action in the group.
`on_remove(callback)`	`Fn(keys: Set<Key>) -> ()`	—	Adds remove actions and reports one pointer key or the keyboard-selected set.
`size(Size)`	`Size`	`Size::Md`	Sets padding, type size, and large-tag radius for every tag.
`variant(TagVariant)`	`TagVariant`	`TagVariant::Default`	Selects the unselected background and hover token for every tag.
`disallow_empty_selection(bool)`	`bool`	`false`	Inherited MultipleSelection policy blocks the final-key toggle and Escape clearing.
`escape_key_behavior(EscapeKeyBehavior)`	`EscapeKeyBehavior`	`EscapeKeyBehavior::ClearSelection`	Controls whether unmodified Escape clears a nonempty selection or remains available to an enclosing interaction.
`fixed release activation`	`bool`	`false`	GPUI activation occurs on click release and is not caller-configurable.
`new(id, tags) / label / description`	`id, tags / AnyElement \| render closure`	—	The constructor collection plus label and description builders provide the compound content.
`new(id, tags)`	`id, tags`	—	The constructor accepts the complete typed tag collection.
`empty_state(text)`	`text`	—	A custom string replaces the built-in empty message, without list render props.
`new(key, label)`	`key, label`	—	Stable tag identity used for selection and removal callbacks.
`tag_content(render)`	`AnyElement \| render closure`	—	Replacement content receives selected, disabled, hovered, pressed, focused, and focus-visible state.
`remove_content(render)`	`AnyElement`	`AnyElement::CloseIcon`	Each tag may replace the automatic close glyph with custom remove-button content while preserving the built-in action.

Parts

Tag Group parts
Part	Description
`TagGroup`	Field-like root owning selection, removal, label, and description.
`TagGroup`	Wrapping horizontal list and empty-state owner, rendered inside the monolithic root.
`Tag`	Focusable selectable item with optional prefix and caller-rendered content.
`Tag`	Automatic per-tag remove action with replaceable caller content.

States

Tag Group states
Builder	State	Description
`selected_keys`	`Selected`	Uses accent-soft foreground and fill, including its selected hover token.
`is_disabled / disabled_keys`	`Disabled`	Dims the tag and removes selection, removal, and roving-focus behavior.
`hover chrome + tag_content`	`Hovered`	Selectable enabled tags use the variant-specific hover fill and expose hover render state.
`interaction + tag_content`	`Pressed`	The pinned stylesheet has no pressed visual rule; selectable enabled tags expose pressed render state.
`cursor keyed state`	`Focused`	One enabled tag owns the group's roving focus handle.
`with_focus_ring + tag_content`	`Focus visible`	Keyboard focus draws the status ring and reaches tag render state.

Dropdown List Box