Unveiling the Cutting-Edge .NET MAUI Chips Control
Tags: dotnetmaui, development, mobile, ui
Published: 2023-07-13 12:39:21

---
title: Unveiling the Cutting-Edge .NET MAUI Chips Control
published: true
date: 2023-07-13 11:05:36 UTC
tags: dotnetmaui, development, mobile, ui
canonical_url: https://www.syncfusion.com/blogs/post/new-dotnet-maui-chips-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emhjfnrpu305gnwi513q.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 "Essential Studio 2023 Volume 2") release, we introduced a new button control called [Chips in the .NET MAUI](https://www.syncfusion.com/maui-controls/maui-chips ".NET MAUI Chips Control") 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 ".NET MAUI Chips Control") 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Input-type-chip.png" alt="Input type chip" style="width:100%">

  <figcaption>Input type chip</figcaption>

</figure>

#### 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Filter-type-chip.png" alt="Filter type chip" style="width:100%">

  <figcaption>Filter type chip</figcaption>

</figure>

#### Choice

The choice type of .NET MAUI Chips provides a way to select a single option from several options.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Choice-type-chip.png" alt="Choice type chip" style="width:100%">

  <figcaption>Choice type chip</figcaption>

</figure>

#### 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Action-type-chip.gif" alt="Action type chip" style="width:100%">

  <figcaption>Action type chip</figcaption>

</figure>

### 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-background-image-in-.NET-MAUI-Chips.png" alt="Customizing the background image in .NET MAUI Chips" style="width:100%">

  <figcaption>Customizing the background image in .NET MAUI Chips</figcaption>

</figure>

#### Corner radius

The .NET MAUI Chips control’s corner radii can easily be customized to create rounded edges.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-corner-radius-in-.NET-MAUI-Chips.png" alt="Customizing the corner radius in .NET MAUI Chips" style="width:100%">

  <figcaption>Customizing the corner radius in .NET MAUI Chips</figcaption>

</figure>

#### Border color

You can apply a desired color as the border color of the .NET MAUI Chips control.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-border-color-of-.NET-MAUI-Chips.png" alt="Customizing the border color of .NET MAUI Chips" style="width:100%">

  <figcaption>Customizing the border color of .NET MAUI Chips</figcaption>

</figure>

#### 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-border-thickness-of-.NET-MAUI-Chips.png" alt="Customizing the border thickness of .NET MAUI Chips" style="width:100%">

  <figcaption>Customizing the border thickness of .NET MAUI Chips</figcaption>

</figure>

**Note:** For more details, refer to the [.NET MAUI Chips documentation](https://help.syncfusion.com/maui/chips/overview "Getting started with .NET MAUI Chips control").

## 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 "Build your first .NET MAUI app documentation").

**Step**  **2** : The Syncfusion .NET MAUI controls are available on [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the .NET MAUI Chips control to your project, open the NuGet package manager in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"). Search for [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core "Syncfusion.Maui.Core NuGet package") and then install it.

**Step**  **3** : Register the handler for the Syncfusion core in the  **MauiProgram.cs**  file.

```csharp
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<App>()
		.ConfigureSyncfusionCore()
		.ConfigureFonts(fonts =>
		{
	           fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		});
		return builder. Build();
	 }
  }
}
```

**Step 4:** Add the **Syncfusion.Maui.Core** namespace in your XAML page.

```xml
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.

```xml
<chip:SfChip WidthRequest="100" Text="Chip" x:Name="chips" />
```

We’ll get the .NET MAUI Chips control like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Integrating-the-Chips-control-into-a-.NET-MAUI-application.png" alt="Integrating the Chips control into a .NET MAUI application" style="width:100%">

  <figcaption>Integrating the Chips control into a .NET MAUI application</figcaption>

</figure>

**Step 6:** Let’s initialize the **ChipGroup** to show multiple chips in a group view. Refer to the following code example.

```xml
xmlns:local="clr-namespace:ChipSample"
xmlns:chip="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"

<ContentPage.BindingContext>
 <local:ViewModel> </local:ViewModel>
</ContentPage.BindingContext>
<chip:SfChipGroup Margin="0,20,0,0" 
		  ItemsSource="{Binding Employees}" 
		  ChipPadding="8,8,0,0"  
	          DisplayMemberPath="Name"
                  ItemHeight="33"
		  ChipBackground="white"
		  ChipTextColor="Black"
		  HorizontalOptions="CenterAndExpand" 
		  VerticalOptions="Center">
</chip:SfChipGroup>
```

**Step 7:** To display the employees’ names in the chips group, add the **ViewModel** class and **Person**  **Model** class for the **ChipGroup**.  
**ViewModel**

```csharp
public class ViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Person> employees;
    public ObservableCollection<Person> Employees
    {
        get { return employees; }
        set { Employees = value; OnPropertyChanged("Employees"); }
    }

    public ViewModel()
    {
        employees = new ObservableCollection<Person>();
        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**

```csharp
public class Person
{
    public string Name
    {
        get;
        set;
    }
}
```

After executing these code examples, we’ll get output like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Displaying-multiple-chips-in-a-group-using-the-.NET-MAUI-Chips-control.png" alt="Displaying multiple chips in a group using the .NET MAUI Chips control" style="width:100%">

  <figcaption>Displaying multiple chips in a group using the .NET MAUI Chips control</figcaption>

</figure>

## GitHub reference

For more details, refer to the .NET MAUI Chips control [GitHub demo](https://github.com/SyncfusionExamples/maui_chips_samples/tree/master/ChipSample ".NET MAUI Chips control GitHub demos").

## 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 ".NET MAUI Chips control") 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 "Essential Studio 2023 Volume 2") 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 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New page") 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 "Get free evaluation of the Essential Studio products") to start evaluating the suite immediately.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). 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 "Blog: Introducing the .NET MAUI Toolbox for Visual Studio")
- [Introducing the New .NET MAUI Image Editor Control](https://www.syncfusion.com/blogs/post/dotnet-maui-image-editor-control.aspx "Blog: Introducing the New .NET MAUI Image Editor Control")
- [Introducing the New .NET MAUI Numeric Entry Control](https://www.syncfusion.com/blogs/post/dotnet-maui-numeric-entry.aspx "Blog: Introducing the New .NET MAUI Numeric Entry Control")
- [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 "Blog: Chart of the Week: Creating a .NET MAUI Multiple-Column Chart to Visualize the Purchase Revenue of US E-Health and Meditation Apps")