Search results

Accessibility

Keyboard interaction

The following shortcut keys are used to access the Chip control without any interruption.

Keyboard shortcuts Actions
Enter Selects the targeted chip from the ChipList/ChipCollection.
Delete Deletes the targeted chip from the ChipList/ChipCollection.
@using Syncfusion.EJ2.Blazor.Buttons
<EjsChipList ID="chip-avatar" EnableDelete="true" Selection="Selection.Single">
    <ChipCollection>

        <ChipListChip Text="Andrew" AvatarIconCss='andrew'></ChipListChip>
        <ChipListChip Text="Janet" AvatarIconCss='janet'></ChipListChip>
        <ChipListChip Text="Laura" AvatarIconCss='laura'></ChipListChip>
        <ChipListChip Text="Margaret" AvatarIconCss='margaret'></ChipListChip>

    </ChipCollection>
</EjsChipList>

<style>
    #chip-avatar .andrew {
        background-image: url('./andrew.png')
    }

    #chip-avatar .margaret {
        background-image: url('./margaret.png')
    }

    #chip-avatar .laura {
        background-image: url('./laura.png')
    }

    #chip-avatar .janet {
        background-image: url('./janet.png')
    }
</style>

Output be like the below.

Chip with avatarIcon and selection