Implementing .NET MAUI Chips
The Syncfusion .NET MAUI Chips control provides versatile and feature-rich components (SfChip and SfChipGroup) for displaying information in compact, interactive layouts. Chips enable users to view, select, filter, or trigger actions through visually appealing and customizable UI elements.
When to Use This Skill
Use this skill when the user needs to:
- Display categorical data as compact, interactive chips (tags, labels, categories)
- Implement selection interfaces with single or multi-select chip groups
- Create input chips that can be dynamically added or removed by users
- Build filter interfaces with multi-selection indicators for data filtering
- Add action chips that execute commands when clicked
- Customize chip appearance with colors, borders, icons, fonts, and images
- Handle chip interactions through selection events, click handlers, or removal events
- Bind chip data from collections using ItemsSource and DisplayMemberPath
Component Overview
SfChip: Individual chip component with text, icon, close button, and customization options.
SfChipGroup: Container that manages multiple chips with support for:
- Four chip types: Input, Choice, Filter, Action
- Data binding with ItemsSource
- Selection modes and visual states
- Layout customization (FlexLayout, StackLayout, etc.)
- Event handling for selection and removal
Key Capabilities:
- Dynamic chip creation and removal
- Single and multi-selection modes
- Visual selection indicators
- Icon and background image support
- Comprehensive styling options
- MVVM command support
- Event-driven interactions
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
When the user needs to:
- Install and configure Syncfusion .NET MAUI Chips package
- Register the Syncfusion Core handler in MauiProgram.cs
- Create first SfChip or SfChipGroup
- Set up chip layouts (FlexLayout, StackLayout)
- Understand basic chip setup and configuration
- See a minimal working example
Chip Types and Selection Modes
📄 Read: references/chip-types.md
When the user needs to:
- Understand the four chip types: Input, Choice, Filter, Action
- Implement Input chips with dynamic add/remove functionality
- Create Choice chips with single selection (ChoiceMode: Single, SingleOrNone)
- Build Filter chips with multi-selection and selection indicators
- Use Action chips with command execution
- Configure visual states for selected/normal states
- Choose the appropriate chip type for their use case
Customization and Styling
📄 Read: references/customization.md
When the user needs to:
- Customize individual SfChip appearance
- Show/hide close button and selection indicator
- Change colors (background, text, border, close button, selection indicator)
- Modify border properties (stroke thickness, corner radius)
- Style text (font size, family, attributes, color, alignment)
- Configure icons (show, source, size, alignment)
- Add background images
- Customize SfChipGroup styling
- Set chip and selected chip colors
- Configure border and padding
- Adjust item height and text size
- Style selection indicators
- Implement commands for MVVM pattern
- Apply consistent theming across chip groups
Populating Data
📄 Read: references/populating-data.md
When the user needs to:
- Bind business objects to chips using ItemsSource
- Use DisplayMemberPath to specify the text property
- Use ImageMemberPath to bind icon images
- Create model and ViewModel classes for chip data
- Populate chips with SfChip items directly using Items collection
- Add InputView for dynamic chip creation
- Implement data binding best practices
- Handle AOT publishing considerations with [Preserve] attribute
Events and Interactions
📄 Read: references/events.md
When the user needs to:
- Handle SelectionChanging event (cancellable, before selection)
- Handle SelectionChanged event (after selection completes)
- Respond to ChipClicked events
- Handle ItemRemoved events for Input type chips
- Capture CloseButtonClicked events
- Understand event arguments and properties
- Know which events are supported for each chip type
Advanced Features
📄 Read: references/advanced-features.md
When the user needs to:
- Apply font icons to chips (custom icon fonts)
- Use DataTemplateSelector for custom chip templates
- Implement Liquid Glass visual effects
- Programmatically control selection with IsSelected property
- Handle AOT publishing requirements
- Apply platform-specific customizations
1---
2name: syncfusion-maui-chips
3description: Implements Syncfusion .NET MAUI Chips (SfChip or SfChipGroup). Use when working with chips, tags, tag controls, selection chips, input chips, or filter chips in .NET MAUI applications. Covers chip types, chip customization, chip events, chip selection, chip groups, remove chips, close button chips, and chip data binding.
4metadata:
5 author: "Syncfusion Inc"
6 version: "34.1.29"
7---
8
9# Implementing .NET MAUI Chips
10
11The Syncfusion .NET MAUI Chips control provides versatile and feature-rich components (`SfChip` and `SfChipGroup`) for displaying information in compact, interactive layouts. Chips enable users to view, select, filter, or trigger actions through visually appealing and customizable UI elements.
12
13## When to Use This Skill
14
15Use this skill when the user needs to:
16
17- **Display categorical data** as compact, interactive chips (tags, labels, categories)
18- **Implement selection interfaces** with single or multi-select chip groups
19- **Create input chips** that can be dynamically added or removed by users
20- **Build filter interfaces** with multi-selection indicators for data filtering
21- **Add action chips** that execute commands when clicked
22- **Customize chip appearance** with colors, borders, icons, fonts, and images
23- **Handle chip interactions** through selection events, click handlers, or removal events
24- **Bind chip data** from collections using ItemsSource and DisplayMemberPath
25
26## Component Overview
27
28**SfChip:** Individual chip component with text, icon, close button, and customization options.
29
30**SfChipGroup:** Container that manages multiple chips with support for:
31- Four chip types: Input, Choice, Filter, Action
32- Data binding with ItemsSource
33- Selection modes and visual states
34- Layout customization (FlexLayout, StackLayout, etc.)
35- Event handling for selection and removal
36
37**Key Capabilities:**
38- Dynamic chip creation and removal
39- Single and multi-selection modes
40- Visual selection indicators
41- Icon and background image support
42- Comprehensive styling options
43- MVVM command support
44- Event-driven interactions
45
46## Documentation and Navigation Guide
47
48### Getting Started
49📄 **Read:** [references/getting-started.md](references/getting-started.md)
50
51When the user needs to:
52- Install and configure Syncfusion .NET MAUI Chips package
53- Register the Syncfusion Core handler in MauiProgram.cs
54- Create first SfChip or SfChipGroup
55- Set up chip layouts (FlexLayout, StackLayout)
56- Understand basic chip setup and configuration
57- See a minimal working example
58
59### Chip Types and Selection Modes
60📄 **Read:** [references/chip-types.md](references/chip-types.md)
61
62When the user needs to:
63- Understand the four chip types: Input, Choice, Filter, Action
64- Implement Input chips with dynamic add/remove functionality
65- Create Choice chips with single selection (ChoiceMode: Single, SingleOrNone)
66- Build Filter chips with multi-selection and selection indicators
67- Use Action chips with command execution
68- Configure visual states for selected/normal states
69- Choose the appropriate chip type for their use case
70
71### Customization and Styling
72📄 **Read:** [references/customization.md](references/customization.md)
73
74When the user needs to:
75- Customize individual SfChip appearance
76 - Show/hide close button and selection indicator
77 - Change colors (background, text, border, close button, selection indicator)
78 - Modify border properties (stroke thickness, corner radius)
79 - Style text (font size, family, attributes, color, alignment)
80 - Configure icons (show, source, size, alignment)
81 - Add background images
82- Customize SfChipGroup styling
83 - Set chip and selected chip colors
84 - Configure border and padding
85 - Adjust item height and text size
86 - Style selection indicators
87- Implement commands for MVVM pattern
88- Apply consistent theming across chip groups
89
90### Populating Data
91📄 **Read:** [references/populating-data.md](references/populating-data.md)
92
93When the user needs to:
94- Bind business objects to chips using ItemsSource
95- Use DisplayMemberPath to specify the text property
96- Use ImageMemberPath to bind icon images
97- Create model and ViewModel classes for chip data
98- Populate chips with SfChip items directly using Items collection
99- Add InputView for dynamic chip creation
100- Implement data binding best practices
101- Handle AOT publishing considerations with [Preserve] attribute
102
103### Events and Interactions
104📄 **Read:** [references/events.md](references/events.md)
105
106When the user needs to:
107- Handle SelectionChanging event (cancellable, before selection)
108- Handle SelectionChanged event (after selection completes)
109- Respond to ChipClicked events
110- Handle ItemRemoved events for Input type chips
111- Capture CloseButtonClicked events
112- Understand event arguments and properties
113- Know which events are supported for each chip type
114
115### Advanced Features
116📄 **Read:** [references/advanced-features.md](references/advanced-features.md)
117
118When the user needs to:
119- Apply font icons to chips (custom icon fonts)
120- Use DataTemplateSelector for custom chip templates
121- Implement Liquid Glass visual effects
122- Programmatically control selection with IsSelected property
123- Handle AOT publishing requirements
124- Apply platform-specific customizations
125
gabrielmoreira