Types in Blazor Chips

14 Aug 20263 minutes to read

The Chip control has the following types.

  • Input Chip
  • Choice Chip
  • Filter Chip
  • Action Chip

Input Chip

Input chips hold information in a compact form. They are typically used to display entities (such as contacts) with an avatar or icon and a label. The LeadingIconCss property renders an icon for each chip.

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


<style>
    .e-chip .anne {
        background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/anne.png')
    }

    .e-chip .janet {
        background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
    }

    .e-chip .laura {
        background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/laura.png')
    }

    .e-chip .margaret {
        background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/margaret.png')
    }
</style>
Blazor Chip with Input Items

Choice Chip

Choice chips allow a single chip to be selected from the set of ChipItems. The behavior is enabled by setting the Selection property to SelectionType.Single. Clicking the selected chip again deselects it.

@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>
Single Selection in Blazor Chip

Filter Chip

Filter chips allow multiple chips to be selected from the set of ChipItems. The behavior is enabled by setting the Selection property to SelectionType.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>
Multiple Selection in Blazor Chip

Action Chip

Action chips trigger the OnClick or OnDelete event so the application can handle chip interactions. The ChipEventArgs provided to the handler exposes the clicked chip’s Text (the chip label) and Index (its position in the ChipItems collection).

@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();
    }
}
Blazor Action Chip

Deletable Chip

Deletable chips allow a chip to be removed from the set of ChipItems by clicking the delete (X) icon. The behavior is enabled by setting the EnableDelete property to true on the SfChip component. To intercept or react to deletion, the OnDelete and Deleted events are handled.

@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>