How to restrict chip selection in .NET MAUI ChipGroup?

This article explains how to restrict chip selection in the .NET MAUI ChipGroup (SfChipGroup). If you have a requirement to prevent the selection of specific chips, this can be achieved by controlling the selection functionality using the SelectionChanging event.

Imagine a scenario where you want users to select various programming languages from a list but restrict them from selecting “Java”.

Steps

Step 1: Set ChipType to Filter for Multiple Selection

To enable multiple chips selection within a group, set the ChipType property of the SfChipGroup to Filter. This configuration allows users to choose more than one chip within the group.

XAML

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

Step 2: Add Visual States for Selected Chip Color

Utilize visual states to dynamically change the selected chip’s color when chips are clicked. Customize the ChipBackground and ChipTextColor properties for the selected and unselected states.

XAML

<chip:SfChipGroup ChipType="Filter"
                  ItemsSource="{Binding Languages}"
                  SelectionIndicatorColor="White"
                  SelectionChanging="OnSelectionChanging"
                  DisplayMemberPath="Name">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="ChipTextColor" Value="Black" />
                        <Setter Property="ChipBackground" Value="LightGray" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="ChipTextColor" Value="White" />
                        <Setter Property="ChipBackground" Value="Red" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
 </chip:SfChipGroup>

Step 3: Provide Selection Restriction to a Specific Chip using the SelectionChanging Event

In the SelectionChanging event handler method, check if the language name is “Java”. If it is, set e.Cancel to true, effectively preventing the selection of the “Java” chip.

C#

    private void OnSelectionChanging(object sender, SelectionChangingEventArgs e)
    {
        if (e.AddedItem != null && (e.AddedItem as Language).Name.Equals("Java"))
        {
            e.Cancel = true;
        }
    }

Step 4: Populate chip items in ViewModel

In the ViewModel class, populate the required list of chip items.

    public class Language
    {
        public string Name { get; set; }
    }
    
    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

Conclusion

Hope you enjoyed learning how to restrict chip selection in the .NET MAUI ChipGroup [SfChipGroup].

You can refer to our .NET MAUI ChipGroup’s feature tour page to learn about its other groundbreaking feature representations. 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!