Chip Group

Nov 21, 2022
2 minutes to read

Similar to a radio group, a Chip Group (ChipGroup) displays chips across multiple lines. It supports single value and mandatory selection.

Add and Remove Chips

Use the Items property to manage chips within the group. You can add, remove, and re-arrange chips as needed.

csharp

using DevExpress.UITemplates.Collection.Editors;

// Populates the chip group.
chipGroup1.Items.AddRange(new Chip[] {
    new Chip(0, "Red"),
    new Chip(1, "Green"),
    new Chip(2, "Blue"),
    new Chip(3, "Yellow"),
    new Chip(4, "White")
});

// Removes the specified chip.
chipGroup1.Items.RemoveValue(0);

Auto-Size Mode

Use the chip group’s AutoSizeMode property to specify the direction in which the group is expanded to display all its content.

Value	Description
Default	In Visual Studio 2019 and 2022, the same as `None`.
Horizontal	The chip group is automatically resized to display its entire contents horizontally.
Vertical	The chip group’s height is automatically changed to display its entire contents.
None	Disables the auto size mode. Use the `Size` property to specify the chip group’s width and height.

Chip Size

Use the ItemSize property to specify the size of chips.

Size	Screenshot
Small
Default
Large

Group Title

Use the Text property to specify the group title.

Selection

Checking one chip that belongs to a chip group unchecks any previously checked chip within the same group. Set the ShowCheck option to false if you do not want to show the check within the checked chip.

Set the IsMandatorySelection property to true to always have a selected chip.

Use the SelectedItem and SelectedValue properties to obtain the selected/checked chip and value.

csharp

using DevExpress.UITemplates.Collection.Editors;

Chip selectedChip = chipGroup1.SelectedItem;
object selectedValue = chipGroup1.SelectedValue;

Every time the selection changes, the chip group fires the SelectedItemChanged event.

HTML & CSS Template Customization

The Chip Group is created with HTML & CSS templates. This allows you to create fully custom layouts. Template customizations are handled with our HTML Template Editor that is integrated into the Visual Studio IDE. This tool uses an embedded Syntax Editor with autocomplete, tag navigation, and preview.