SusChipGroup

Filter chip row — single or multi selection backed by Items + Model.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Items	Prop<List<ChipGroupItem>>	[]	v-modelfrom presets
Model	Prop<string>	""	v-model
Selection	Prop<List<string>>	[]	v-model
Multiple	Prop<bool>	false	v-model
Mandatory	Prop<bool>	false	v-model
Column	Prop<bool>	false	v-model
Disabled	Prop<bool>	false	v-model
Color	Prop<string>	"primary"	v-model
Variant	Prop<string>	"tonal"	v-model
Size	Prop<string>	"default"	v-model

Slots

No slots.

Events

Name	Field	Payload
Change	OnChange	string
SelectionChange	OnSelectionChange	List<string>

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• keyboard-focus
• sus-chip-group
• sus-chip-group__chip
• sus-chip-group__row
• sus-chip-group--column
• sus-chip-group--disabled
• sus-chip-group--multiple
• sus-hidden

Usage

Items are set in code (List<ChipGroupItem>). Each item carries Label, Value, optional Disabled and optional Count (the chip's counter, see SusChip). The key of an item is its Value, or its Label when Value is empty — the same key Model uses.

var group = new SusChipGroup();
group.Items.Value = new List<SusChipGroup.ChipGroupItem>
{
    new() { Label = "All", Value = "all" },
    new() { Label = "Weapons", Value = "weapons" },
    new() { Label = "Armor", Value = "armor" },
};
group.Model.Value = "all";
group.Mandatory.Value = true;
group.Variant.Value = "tonal";
group.Color.Value = "primary";
group.OnChange += value => { /* … */ };

Prop	Role
Items	List<ChipGroupItem> — chips to render
Model	Selected value (single mode)
Multiple / Selection	Multi-select mode + selected values
Mandatory	Keep at least one selected
Column	Stack chips vertically

Single selection

By default the group picks one value out of Items: set Model, and the group marks the matching chip selected and styles it — you do not set Selected or Variant on the chips yourself. With Mandatory = true a click on the selected chip does not clear it. OnChange fires with the new value. Multiple = true switches to several values (Selection and OnSelectionChange). A disabled item stays disabled across selection changes.

Live counts

SetCounts(IDictionary<string, string>) changes the counters of the chips already in the row, in place — chip references, focus and selection stay as they are:

group.SetCounts(new Dictionary<string, string> { ["all"] = "74", ["weapons"] = "3" });

• Unknown keys are ignored; chips whose key is missing keep their counter.
• An empty or null value removes that chip's counter.
• The chips are built when the group is mounted, so call SetCounts after that. Before mount, put the counts into Items (ChipGroupItem.Count).

Variant

filled · elevated · tonal · outlined · flat · text