syncfusion-maui-chips

$npx mdskill add syncfusion/maui-ui-components-skills/syncfusion-maui-chips

Implement Syncfusion .NET MAUI Chips for tags, selection, and filtering.

  • Displays compact, interactive chips for categories, tags, or filters.
  • Depends on Syncfusion .NET MAUI toolkit (SfChip, SfChipGroup).
  • Selects chip type and customization based on user requirements.
  • Generates XAML or C# code for chip groups with events and data binding.

SKILL.md

.github/skills/syncfusion-maui-chipsView on GitHub ↗
---
name: syncfusion-maui-chips
description: 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.
metadata:
  author: "Syncfusion Inc"
  version: "34.1.29"
---

# 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](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](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](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](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](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](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

More from syncfusion/maui-ui-components-skills

SkillDescription
syncfusion-maui-accordionImplements Syncfusion .NET MAUI Accordion (SfAccordion) - a vertically collapsible panel with stacked headers for expanding/collapsing content. Use when working with accordions, collapsible panels, expandable lists, employee lists with details, or FAQ sections in .NET MAUI applications. Covers AccordionItem configuration, expand modes, and grouped content display.
syncfusion-maui-ai-assistviewImplements Syncfusion .NET MAUI AI AssistView (SfAIAssistView) for AI-powered interactive chat interfaces. Use when working with AI chat interfaces, AI AssistView, SfAIAssistView, conversational UI, or chat with AI responses. Covers integrating AI services, creating chat UIs, implementing conversation flows, managing AI requests/responses, and displaying AI suggestions.
syncfusion-maui-autocompleteImplements and configure Syncfusion .NET MAUI Autocomplete (SfAutocomplete) control for intelligent text input with suggestions. Use when implementing autocomplete, autosuggest, type-ahead search, smart search, or filtered dropdowns in .NET MAUI applications. Covers data binding, filtering modes, custom search logic, AI-powered search, multi-selection with tokens, and UI customization.
syncfusion-maui-avatar-viewImplements Syncfusion .NET MAUI Avatar View (SfAvatarView) for displaying user profile pictures, initials, or group avatars. Use when working with avatar views, profile pictures, user images, initials display, profile icons, or contact images. Ideal for implementing user profile displays, contact lists, chat interfaces, or social feeds.
syncfusion-maui-backdropImplements Syncfusion .NET MAUI Backdrop Page (SfBackdropPage) with back layer and front layer surfaces. Use when working with backdrop pages, SfBackdropPage, back layer, front layer, or reveal/conceal animations. Covers backdrop navigation patterns, header icons, corner shapes, reveal height, layer state events, and liquid glass effect.
syncfusion-maui-badge-viewImplements Syncfusion .NET MAUI Badge View (SfBadgeView) control. Use when adding badge notifications, status indicators, unread counts, or notification overlays to MAUI applications. Covers SfBadgeView setup, badge text customization, position adjustments, animations, predefined symbols, and accessibility features.
syncfusion-maui-barcode-generatorImplements Syncfusion .NET MAUI Barcode Generator (SfBarcodeGenerator) for generating machine-readable barcodes. Use when working with barcodes, barcode generation, QR codes, data matrix, EAN codes, UPC codes, Code128, or Code39. This skill covers both one-dimensional (linear) and two-dimensional (matrix) barcode symbologies with extensive customization options.
syncfusion-maui-busy-indicatorImplements Syncfusion .NET MAUI Busy Indicator (SfBusyIndicator) for showing loading states, data processing, and app activity indicators. Use when displaying loading indicators, busy animations, activity spinners, or processing feedback in .NET MAUI apps. Covers busy indicator setup, animations, and visual feedback during long-running operations.
syncfusion-maui-buttonImplements and customize Syncfusion .NET MAUI Button (SfButton) control. Use when working with MAUI buttons, SfButton implementation, button customization, or visual states. Covers button icons, background images, RTL support, Liquid Glass effects, custom button views, button styling, events, and checkable buttons.
syncfusion-maui-calendarImplements and customize Syncfusion .NET MAUI Calendar (SfCalendar) control. Use when implementing calendar functionality, date selection (single, multiple, range), or calendar views (month, year, decade, century). Covers date restrictions (min/max dates, EnablePastDates, SelectableDayPredicate), calendar customization, events (ViewChanged, SelectionChanged, Tapped), and header/footer customization.