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