{"id":"4a92fb25-fbbd-4294-81ff-f4df23b0d973","shortId":"jmUQDx","kind":"skill","title":"syncfusion-maui-chips","tagline":"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, ","description":"# Implementing .NET MAUI Chips\n\nThe 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.\n\n## When to Use This Skill\n\nUse this skill when the user needs to:\n\n- **Display categorical data** as compact, interactive chips (tags, labels, categories)\n- **Implement selection interfaces** with single or multi-select chip groups\n- **Create input chips** that can be dynamically added or removed by users\n- **Build filter interfaces** with multi-selection indicators for data filtering\n- **Add action chips** that execute commands when clicked\n- **Customize chip appearance** with colors, borders, icons, fonts, and images\n- **Handle chip interactions** through selection events, click handlers, or removal events\n- **Bind chip data** from collections using ItemsSource and DisplayMemberPath\n\n## Component Overview\n\n**SfChip:** Individual chip component with text, icon, close button, and customization options.\n\n**SfChipGroup:** Container that manages multiple chips with support for:\n- Four chip types: Input, Choice, Filter, Action\n- Data binding with ItemsSource\n- Selection modes and visual states\n- Layout customization (FlexLayout, StackLayout, etc.)\n- Event handling for selection and removal\n\n**Key Capabilities:**\n- Dynamic chip creation and removal\n- Single and multi-selection modes\n- Visual selection indicators\n- Icon and background image support\n- Comprehensive styling options\n- MVVM command support\n- Event-driven interactions\n\n## Documentation and Navigation Guide\n\n### Getting Started\n📄 **Read:** [references/getting-started.md](references/getting-started.md)\n\nWhen the user needs to:\n- Install and configure Syncfusion .NET MAUI Chips package\n- Register the Syncfusion Core handler in MauiProgram.cs\n- Create first SfChip or SfChipGroup\n- Set up chip layouts (FlexLayout, StackLayout)\n- Understand basic chip setup and configuration\n- See a minimal working example\n\n### Chip Types and Selection Modes\n📄 **Read:** [references/chip-types.md](references/chip-types.md)\n\nWhen the user needs to:\n- Understand the four chip types: Input, Choice, Filter, Action\n- Implement Input chips with dynamic add/remove functionality\n- Create Choice chips with single selection (ChoiceMode: Single, SingleOrNone)\n- Build Filter chips with multi-selection and selection indicators\n- Use Action chips with command execution\n- Configure visual states for selected/normal states\n- Choose the appropriate chip type for their use case\n\n### Customization and Styling\n📄 **Read:** [references/customization.md](references/customization.md)\n\nWhen the user needs to:\n- Customize individual SfChip appearance\n  - Show/hide close button and selection indicator\n  - Change colors (background, text, border, close button, selection indicator)\n  - Modify border properties (stroke thickness, corner radius)\n  - Style text (font size, family, attributes, color, alignment)\n  - Configure icons (show, source, size, alignment)\n  - Add background images\n- Customize SfChipGroup styling\n  - Set chip and selected chip colors\n  - Configure border and padding\n  - Adjust item height and text size\n  - Style selection indicators\n- Implement commands for MVVM pattern\n- Apply consistent theming across chip groups\n\n### Populating Data\n📄 **Read:** [references/populating-data.md](references/populating-data.md)\n\nWhen the user needs to:\n- Bind business objects to chips using ItemsSource\n- Use DisplayMemberPath to specify the text property\n- Use ImageMemberPath to bind icon images\n- Create model and ViewModel classes for chip data\n- Populate chips with SfChip items directly using Items collection\n- Add InputView for dynamic chip creation\n- Implement data binding best practices\n- Handle AOT publishing considerations with [Preserve] attribute\n\n### Events and Interactions\n📄 **Read:** [references/events.md](references/events.md)\n\nWhen the user needs to:\n- Handle SelectionChanging event (cancellable, before selection)\n- Handle SelectionChanged event (after selection completes)\n- Respond to ChipClicked events\n- Handle ItemRemoved events for Input type chips\n- Capture CloseButtonClicked events\n- Understand event arguments and properties\n- Know which events are supported for each chip type\n\n### Advanced Features\n📄 **Read:** [references/advanced-features.md](references/advanced-features.md)\n\nWhen the user needs to:\n- Apply font icons to chips (custom icon fonts)\n- Use DataTemplateSelector for custom chip templates\n- Implement Liquid Glass visual effects\n- Programmatically control selection with IsSelected property\n- Handle AOT publishing requirements\n- Apply platform-specific customizations","tags":["syncfusion","maui","chips","components","skills","agent-skills"],"capabilities":["skill","source-syncfusion","skill-syncfusion-maui-chips","topic-agent-skills"],"categories":["maui-ui-components-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-chips","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add syncfusion/maui-ui-components-skills","source_repo":"https://github.com/syncfusion/maui-ui-components-skills","install_from":"skills.sh"}},"qualityScore":"0.476","qualityRationale":"deterministic score 0.48 from registry signals: · indexed on github topic:agent-skills · 53 github stars · SKILL.md body (4,817 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:56:06.194Z","embedding":null,"createdAt":"2026-04-18T22:15:09.266Z","updatedAt":"2026-04-22T00:56:06.194Z","lastSeenAt":"2026-04-22T00:56:06.194Z","tsv":"'across':469 'action':81,147,213,337,365 'ad':130 'add':146,436,519 'add/remove':343 'adjust':452 'advanc':588 'align':429,435 'aot':531,624 'appeal':84 'appear':156,399 'appli':466,598,627 'applic':31 'appropri':378 'argument':576 'attribut':427,536 'background':252,408,437 'basic':306 'best':528 'bind':175,215,482,499,527 'border':159,410,416,449 'build':135,354 'busi':483 'button':194,402,412 'cancel':551 'capabl':235 'captur':571 'case':384 'categor':103 'categori':111 'chang':406 'chip':4,9,17,22,24,27,33,35,37,39,41,44,48,53,72,108,121,125,148,155,165,176,188,203,208,237,285,301,307,316,332,340,347,356,366,379,443,446,470,486,508,511,523,570,586,602,610 'chipclick':562 'choic':211,335,346 'choicemod':351 'choos':376 'class':506 'click':153,170 'close':193,401,411 'closebuttonclick':572 'collect':179,518 'color':158,407,428,447 'command':151,259,368,462 'compact':69,106 'complet':559 'compon':61,184,189 'comprehens':255 'configur':281,310,370,430,448 'consider':533 'consist':467 'contain':199 'control':20,54,618 'core':290 'corner':420 'cover':32 'creat':123,294,345,502 'creation':238,524 'custom':36,154,196,224,385,396,439,603,609,631 'customiz':86 'data':104,144,177,214,473,509,526 'datatemplateselector':607 'direct':515 'display':66,102 'displaymemberpath':183,490 'document':265 'driven':263 'dynam':129,236,342,522 'effect':616 'element':88 'enabl':73 'etc':227 'event':38,169,174,228,262,537,550,556,563,566,573,575,581 'event-driven':261 'exampl':315 'execut':150,369 'famili':426 'featur':59,589 'feature-rich':58 'filter':26,78,136,145,212,336,355 'first':295 'flexlayout':225,303 'font':161,424,599,605 'four':207,331 'function':344 'get':269 'glass':614 'group':42,122,471 'guid':268 'handl':164,229,530,548,554,564,623 'handler':171,291 'height':454 'icon':160,192,250,431,500,600,604 'imag':163,253,438,501 'imagememberpath':497 'implement':5,45,112,338,461,525,612 'indic':142,249,363,405,414,460 'individu':187,397 'inform':67 'input':23,124,210,334,339,568 'inputview':520 'instal':279 'interact':70,107,166,264,539 'interfac':114,137 'isselect':621 'item':453,514,517 'itemremov':565 'itemssourc':181,217,488 'key':234 'know':579 'label':110 'layout':71,223,302 'liquid':613 'manag':201 'maui':3,8,30,47,52,284 'mauiprogram.cs':293 'minim':313 'mode':219,246,320 'model':503 'modifi':415 'multi':119,140,244,359 'multi-select':118,139,243,358 'multipl':202 'mvvm':258,464 'navig':267 'need':100,277,327,394,480,546,596 'net':7,29,46,51,283 'object':484 'option':197,257 'overview':185 'packag':286 'pad':451 'pattern':465 'platform':629 'platform-specif':628 'popul':472,510 'practic':529 'preserv':535 'programmat':617 'properti':417,495,578,622 'provid':55 'publish':532,625 'radius':421 'read':271,321,388,474,540,590 'references/advanced-features.md':591,592 'references/chip-types.md':322,323 'references/customization.md':389,390 'references/events.md':541,542 'references/getting-started.md':272,273 'references/populating-data.md':475,476 'regist':287 'remov':43,132,173,233,240 'requir':626 'respond':560 'rich':60 'see':311 'select':21,40,77,113,120,141,168,218,231,245,248,319,350,360,362,404,413,445,459,553,558,619 'selected/normal':374 'selectionchang':549,555 'set':299,442 'setup':308 'sfchip':10,62,186,296,398,513 'sfchipgroup':12,64,198,298,440 'show':432 'show/hide':400 'singl':116,241,349,352 'singleornon':353 'size':425,434,457 'skill':93,96 'skill-syncfusion-maui-chips' 'sourc':433 'source-syncfusion' 'specif':630 'specifi':492 'stacklayout':226,304 'start':270 'state':222,372,375 'stroke':418 'style':256,387,422,441,458 'support':205,254,260,583 'syncfus':2,6,50,282,289 'syncfusion-maui-chip':1 'tag':18,19,109 'templat':611 'text':191,409,423,456,494 'theme':468 'thick':419 'topic-agent-skills' 'trigger':80 'type':34,209,317,333,380,569,587 'ui':87 'understand':305,329,574 'use':13,91,94,180,364,383,487,489,496,516,606 'user':74,99,134,276,326,393,479,545,595 'versatil':56 'view':76 'viewmodel':505 'visual':83,221,247,371,615 'work':15,314","prices":[{"id":"0911152d-a5fe-4bd3-bb6b-8f3dae3572be","listingId":"4a92fb25-fbbd-4294-81ff-f4df23b0d973","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"syncfusion","category":"maui-ui-components-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:15:09.266Z"}],"sources":[{"listingId":"4a92fb25-fbbd-4294-81ff-f4df23b0d973","source":"github","sourceId":"syncfusion/maui-ui-components-skills/syncfusion-maui-chips","sourceUrl":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-chips","isPrimary":false,"firstSeenAt":"2026-04-18T22:15:09.266Z","lastSeenAt":"2026-04-22T00:56:06.194Z"}],"details":{"listingId":"4a92fb25-fbbd-4294-81ff-f4df23b0d973","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"syncfusion","slug":"syncfusion-maui-chips","github":{"repo":"syncfusion/maui-ui-components-skills","stars":53,"topics":["agent-skills"],"license":null,"html_url":"https://github.com/syncfusion/maui-ui-components-skills","pushed_at":"2026-04-08T07:27:37Z","description":"Skills for Syncfusion .NET MAUI components. Enable AI-assisted development with comprehensive documentation, code examples, and best practices for 100+ UI controls including DataGrid, Charts, Scheduler, and more.","skill_md_sha":"8b86b4215d77fb2219bce532c3ed925d4a4139bd","skill_md_path":"skills/syncfusion-maui-chips/SKILL.md","default_branch":"master","skill_tree_url":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-chips"},"layout":"multi","source":"github","category":"maui-ui-components-skills","frontmatter":{"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."},"skills_sh_url":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-chips"},"updatedAt":"2026-04-22T00:56:06.194Z"}}