--- title: "Unveiling the Cutting-Edge .NET MAUI Chips Control" published_at: "2023-07-13T11:05:36+00:00" modified_at: "2026-01-13T11:51:17+00:00" url: "https://www.syncfusion.com/blogs/post/new-dotnet-maui-chips-control" excerpt: "This blog explains the features of the new .NET MAUI Chips control introduced in the 2023 Volume 2 release and the steps to get started with it." taxonomy_category: - ".NET MAUI" - "Desktop" - "Development" - "Mobile" - "Syncfusion" - "What's new" taxonomy_post_tag: - ".NET MAUI" - "chips" - "desktop" - "MAUI" - "Mobile" --- # Unveiling the Cutting-Edge .NET MAUI Chips Control [Paul Anderson](https://www.syncfusion.com/blogs/author/paulanderson) ![Unveiling the Cutting-Edge .NET MAUI Chips Control](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Unveiling-the-Cutting-Edge-.NET-MAUI-Chips-Control.png) In Syncfusion’s Essential Studio® [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download) release, we introduced a new button control called [Chips in the .NET MAUI](https://www.syncfusion.com/maui-controls/maui-chips) platform. This control is designed specifically for .NET MAUI applications, making it a perfect fit for developers building cross-platform mobile apps with .NET. The [.NET MAUI Chips control](https://www.syncfusion.com/maui-controls/maui-chips) offers an intuitive and visually appealing way to present selectable items or tags. It enables you to arrange multiple chips in a layout and group them for seamless selection and interaction. In this article, we will see the key features of the new .NET MAUI Chips control and the steps to getting started with it. ## Key features The .NET MAUI Chips control supports many user-friendly features. You can: - Choose from various layout options, such as stack and flex, to arrange the chips. - Convert text into compact chips, displaying information in a concise way. - Customize the appearance of the chips by adding a background image. - Easily modify the text color, background color, border color, border thickness, and selection color of the chips, ensuring a cohesive and visually appealing design. This flexibility enables the creation of visually consistent and aesthetically pleasing chips. ### Chip types There are four types of chips available in the **SfChipGroup**: input, filter, choice, and action. #### Input Enter a piece of information in a compact form to convert text into chips. The input type of .NET MAUI Chips can be removed from a layout with the **close** icon. It also has an optional input view (an entry) to provide chip text when creating a new chip at runtime. ![Input type chip](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Input-type-chip.png) Input type chip #### Filter The filter type of .NET MAUI Chips provides a way to make multiple selections in a chip group. A selection indicator will appear when a chip is selected. ![Filter type chip](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Filter-type-chip.png) Filter type chip #### Choice The choice type of .NET MAUI Chips provides a way to select a single option from several options. ![Choice type chip](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Choice-type-chip.png) Choice type chip #### Action The action type of .NET MAUI Chips executes a command on tapping a chip. It returns the tapped chip or its data context as a command parameter. ![Action type chip](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Action-type-chip.gif) Action type chip ### Customization The .NET MAUI Chips control lets you customize its background image, corner radius, border thickness, and color. #### Background image You can easily customize the appearance of your chip with a background image to illustrate the chip text. ![Customizing the background image in .NET MAUI Chips](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-background-image-in-.NET-MAUI-Chips.png) Customizing the background image in .NET MAUI Chips #### Corner radius The .NET MAUI Chips control’s corner radii can easily be customized to create rounded edges. ![Customizing the corner radius in .NET MAUI Chips](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-corner-radius-in-.NET-MAUI-Chips.png) Customizing the corner radius in .NET MAUI Chips #### Border color You can apply a desired color as the border color of the .NET MAUI Chips control. ![Customizing the border color of .NET MAUI Chips](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-border-color-of-.NET-MAUI-Chips.png) Customizing the border color of .NET MAUI Chips #### Border thickness The border thickness of the chips can easily be customized to the desired value. You can also remove the border if it is not required. ![Customizing the border thickness of .NET MAUI Chips](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-border-thickness-of-.NET-MAUI-Chips.png) Customizing the border thickness of .NET MAUI Chips **Note:** For more details, refer to the [.NET MAUI Chips documentation](https://help.syncfusion.com/maui/chips/overview) . ## Getting started with the .NET MAUI Chips control We have seen the key features of the .NET MAUI Chips control. Let’s next learn how to integrate it into your .NET MAUI app and utilize its features. **Step 1**: First, create [a .NET MAUI application](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android) . **Step** ** 2**: The Syncfusion .NET MAUI controls are available on [NuGet Gallery](https://www.nuget.org/) . To add the .NET MAUI Chips control to your project, open the NuGet package manager in [Visual Studio](https://visualstudio.microsoft.com/) . Search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) and then install it. **Step** ** 3**: Register the handler for the Syncfusion core in the ** MauiProgram.cs** file. ``` using Microsoft.Maui; using Microsoft.Maui.Hosting; using Microsoft.Maui.Controls.Compatibility; using Microsoft.Maui.Controls.Hosting; using Microsoft.Maui.Controls.Xaml; using Syncfusion.Maui.Core.Hosting; namespace ChipSample { public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp() .ConfigureSyncfusionCore() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); }); return builder. Build(); } } } ``` **Step 4:** Add the ** Syncfusion.Maui.Core** namespace in your XAML page. ``` xmlns:chip="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" ``` **Step 5:** Initialize the Syncfusion .NET MAUI Chips control like in the following code example. ``` ``` We’ll get the .NET MAUI Chips control like in the following image. ![Integrating the Chips control into a .NET MAUI application](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Integrating-the-Chips-control-into-a-.NET-MAUI-application.png) Integrating the Chips control into a .NET MAUI application **Step 6:** Let’s initialize the ** ChipGroup** to show multiple chips in a group view. Refer to the following code example. ``` xmlns:local="clr-namespace:ChipSample" xmlns:chip="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core" ``` **Step 7:** To display the employees’ names in the chips group, add the **ViewModel** class and ** Person** ** Model** class for the** ChipGroup**.** ViewModel** ``` public class ViewModel : INotifyPropertyChanged { private ObservableCollection employees; public ObservableCollection Employees { get { return employees; } set { Employees = value; OnPropertyChanged("Employees"); } } public ViewModel() { employees = new ObservableCollection(); employees.Add(new Person() { Name = "John" }); employees.Add(new Person() { Name = "James" }); employees.Add(new Person() { Name = "Linda" }); employees.Add(new Person() { Name = "Rose" }); employees.Add(new Person() { Name = "Mark" }); } public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string property) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(property)); } } } ``` **Model** ``` public class Person { public string Name { get; set; } } ``` After executing these code examples, we’ll get output like in the following image. ![Displaying multiple chips in a group using the .NET MAUI Chips control](https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Displaying-multiple-chips-in-a-group-using-the-.NET-MAUI-Chips-control.png) Displaying multiple chips in a group using the .NET MAUI Chips control ## GitHub reference For more details, refer to the .NET MAUI Chips control [GitHub demo](https://github.com/SyncfusionExamples/maui_chips_samples/tree/master/ChipSample) . ## Conclusion Thanks for reading! In this blog, we have seen the features of the new Syncfusion [.NET MAUI Chips](https://www.syncfusion.com/maui-controls/maui-chips) control rolled out in the [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download) release. With this control, enable users to select options with a visually appealing user interface and better user experience. Our [Release Notes](https://www.syncfusion.com/products/release-history) and [What’s New](https://www.syncfusion.com/products/whatsnew) pages provide information about our other new controls and features from this release. Try them out and leave your feedback in the comments section below! If you are not a Syncfusion customer, download a free trial of [Essential Studio® for .NET MAUI](https://www.syncfusion.com/downloads/maui) to start evaluating the suite immediately. For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com) , or [feedback portal](https://www.syncfusion.com/feedback/) . We are always happy to help you! ## Related blogs - [Introducing the .NET MAUI Toolbox for Visual Studio](https://www.syncfusion.com/blogs/post/dotnet-maui-visual-studio-toolbox.aspx) - [Introducing the New .NET MAUI Image Editor Control](https://www.syncfusion.com/blogs/post/dotnet-maui-image-editor-control.aspx) - [Introducing the New .NET MAUI Numeric Entry Control](https://www.syncfusion.com/blogs/post/dotnet-maui-numeric-entry.aspx) - [Chart of the Week: Creating a .NET MAUI Multiple-Column Chart to Visualize the Purchase Revenue of US E-Health and Meditation Apps](https://www.syncfusion.com/blogs/post/dotnet-maui-multiple-column-chart-visualize-health-app-revenue.aspx)