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.
razor
default.cs
@Html.EJS().ChipList("chip-avatar").EnableDelete(true).Selection(Selection.Single).Chips(chip =>
                        {
                            chip.Text("Andrew").avatarIconCss("andrew").Enabled(true).Add();
                            chip.Text("Janet").avatarIconCss("janet").Enabled(true).Add();
                            chip.Text("Laura").avatarIconCss("laura").Enabled(true).Add();
                            chip.Text("Margaret").avatarIconCss("margaret").Enabled(true).Add();
                        }).Render()

<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>
public IActionResult Index()
    {
            return View();
    }