Chip Group
- 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.
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.
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.