How to remove the selection indicator icon from .NET MAUI ChipGroup?

This article explains how to remove the selection indicator icon in the .NET MAUI ChipGroup (SfChipGroup) when the ChipType is set to Filter.

Steps

Step 1: Enable the ChipType as a Filter for Multiple Selections

To select multiple chips in the ChipGroup, set the ChipType property to “Filter”. This configuration allows users to choose more than one chip within the group.

XAML

<chip:SfChipGroup ChipType="Filter">
        ...
</chip:SfChipGroup>

Step 2: Remove the Selection indicator icon from ChipGroup:

You can remove the indicator icon from the .NET MAUI ChipGroup by using the ItemTemplate property. Inside this template, add the Chip control as the content, which will display the language names only.

XAML

 <chip:SfChipGroup x:Name="chipGroup"
                   ChipType="Filter">
            <chip:SfChipGroup.ItemTemplate>
                <DataTemplate>
                    <chip:SfChip Text="{Binding Name}" />
                </DataTemplate>
            </chip:SfChipGroup.ItemTemplate>
 </chip:SfChipGroup>

Step 3: Add the Visual States for the Selected Chip Background

To set the background color for the selected chips, use the visual states for the chip group as below. Set the chip’s BackgroundColor of SfChip to transparent, enabling dynamic changes to the ChipBackground of ChipGroup items using Visual States. Additionally, set InputTransparent to true in Chip to disable inputs, ensuring its children receive input.

XAML

 <chip:SfChipGroup x:Name="chipGroup"
                   ChipType="Filter">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="ChipBackground" Value="White" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="ChipBackground" Value="#512dcd" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <chip:SfChipGroup.ItemTemplate>
                <DataTemplate>
                    <chip:SfChip InputTransparent="True"
                                 BackgroundColor="Transparent">
                        ...
                    </chip:SfChip>
                </DataTemplate>
            </chip:SfChipGroup.ItemTemplate>
 </chip:SfChipGroup>

Step 4: Change the Selected chip TextColor

Add the DataTriggers to change the TextColor of the Chip based on the IsSelected property from the Language class. You can set the value for the IsSelected property in the SelectionChanged Event.

XAML

 <chip:SfChipGroup x:Name="chipGroup"
                   ChipType="Filter"
                   ItemsSource="{Binding Languages}"
                   SelectionChanged="OnSelectionChanged">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="ChipBackground" Value="White" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="ChipBackground" Value="#512dcd" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <chip:SfChipGroup.ItemTemplate>
                <DataTemplate>
                    <chip:SfChip Text="{Binding Name}"
                                 InputTransparent="True"
                                 BackgroundColor="Transparent">
                        <chip:SfChip.Triggers>
                            <DataTrigger TargetType="chip:SfChip" Binding="{Binding IsSelected}" Value="True">
                                <Setter Property="TextColor" Value="White"/>
                            </DataTrigger>
                            <DataTrigger TargetType="chip:SfChip" Binding="{Binding IsSelected}" Value="False">
                                <Setter Property="TextColor" Value="Red"/>
                            </DataTrigger>
                        </chip:SfChip.Triggers>
                    </chip:SfChip>
                </DataTemplate>
            </chip:SfChipGroup.ItemTemplate>
 </chip:SfChipGroup>
        

SelectionChanged Event

    private void OnSelectionChanged(object sender, Syncfusion.Maui.Core.Chips.SelectionChangedEventArgs e)
    {
        if (e.AddedItem != null)
        {
            (e.AddedItem as Language).IsSelected= true;
        }

        if (e.RemovedItem != null)
        {
            (e.RemovedItem as Language).IsSelected= false;
        }
    }

Populate chip items

    public class Language : INotifyPropertyChanged
    {
        public string Name
        {
            get;
            set;
        }

        private bool isSelected= false;

        public event PropertyChangedEventHandler PropertyChanged;

        public bool IsSelected
        {
            get { return isSelected; }
            set
            {
                isSelected= value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("IsSelected"));
            }
        }
    }

public class ViewModel
{
    public ObservableCollection<Language> Languages { get; set; }

    public ViewModel()
    {
        this.Languages = new ObservableCollection<Language>();

        Languages.Add(new Language() { Name = "C#" });
        Languages.Add(new Language() { Name = "Python" });
        Languages.Add(new Language() { Name = "Java" });
        Languages.Add(new Language() { Name = "Js" });
    }
}

Output

Download the complete sample on GitHub

Conclusion

I hope you enjoyed learning how to remove the indicator icon from the .NET MAUI ChipGroup [SfChipGroup].

You can refer to our .NET MAUI ChipGroup’s feature tour page to learn about its other groundbreaking features. You can explore our .NET MAUI Chips documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our .NET MAUI ChipGroup(SfChipGroup) and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!