Types in Blazor Chips Component

10 Jan 20253 minutes to read

The Chips component has the following types.

• Input Chips
• Choice Chips
• Filter Chips
• Action Chips

Input Chips

Input Chips holds information in compact form. It converts user input into chips.

@using Syncfusion.Blazor.Buttons
<SfChip>
    <ChipItems>
        <ChipItem Text="Anne" LeadingIconUrl="./anne.png"></ChipItem>
        <ChipItem Text="Janet" LeadingIconUrl="./janet.png"></ChipItem>
        <ChipItem Text="Laura" LeadingIconUrl="./laura.png"></ChipItem>
        <ChipItem Text="Margaret" LeadingIconUrl="./margaret.png"></ChipItem>
    </ChipItems>
</SfChip>

Choice Chips

Choice Chips allows you to select a single Chips from the set of Chips/ChipItems. It can be enabled by setting the Selection property to Single.

@using Syncfusion.Blazor.Buttons
<SfChip Selection="SelectionType.Single">
    <ChipItems>
        <ChipItem Text="Small"></ChipItem>
        <ChipItem Text="Medium"></ChipItem>
        <ChipItem Text="Large"></ChipItem>
        <ChipItem Text="Extra Large"></ChipItem>
    </ChipItems>
</SfChip>

Filter Chips

Filter Chips allows you to select a multiple Chips from the set of Chips/ChipItems. It can be enabled by setting the Selection property to Multiple.

@using Syncfusion.Blazor.Buttons
<SfChip Selection="SelectionType.Multiple">
    <ChipItems>
        <ChipItem Text="Chai"></ChipItem>
        <ChipItem Text="Chang"></ChipItem>
        <ChipItem Text="Aniseed Syrup"></ChipItem>
        <ChipItem Text="Ikura"></ChipItem>
    </ChipItems>
</SfChip>

Action Chips

The Action Chips triggers the event like OnClick or OnDelete, which helps to do action based on the event.

@using Syncfusion.Blazor.Buttons
<SfChip>
    <ChipEvents OnClick="@OnClick"></ChipEvents>
    <ChipItems>
        <ChipItem Text="Sent a text"></ChipItem>
        <ChipItem Text="Set a remainder"></ChipItem>
        <ChipItem Text="Read my emails"></ChipItem>
        <ChipItem Text="Set alarm"></ChipItem>
    </ChipItems>
</SfChip>

<div>@ChipText</div>

@code
{
    public string ChipText = "";
    private void OnClick(Syncfusion.Blazor.Buttons.ChipEventArgs args)
    {
        ChipText = args.Text;
        this.StateHasChanged();
    }
}

Deletable Chips

Deletable Chips allows you to delete a Chips from Chips/ChipItems. It can be enabled by setting the EnableDelete property to true.

@using Syncfusion.Blazor.Buttons
<SfChip EnableDelete="true">
    <ChipItems>
        <ChipItem Text="Sent a text"></ChipItem>
        <ChipItem Text="Set a remainder"></ChipItem>
        <ChipItem Text="Read my emails"></ChipItem>
        <ChipItem Text="Set alarm"></ChipItem>
    </ChipItems>
</SfChip>