Radzen Blazor Components

Chip

Demonstration and configuration of the Radzen Blazor Chip component.

Chip Style link

Use the ChipStyle property to set a predefined chip style, e.g. ChipStyle="BadgeStyle.Primary".

Primary Secondary Base Info Success Warning Danger Light Dark

Variant link

Use the Variant property to control the chip design variant, e.g. Variant="Variant.Outlined".

Filled Flat Text Outlined

Sizes link

Use the Size property to set the chip size, e.g. Size="ChipSize.Small".

Text

Medium Small Extra small

Icon and Text

settingsMedium settingsSmall settingsExtra small

Icons link

Use the Icon property to display a material icon before the chip text.

homeHome settingsSettings starFavorite infoInfo check_circleDone

Selected link

Use the Selected property to highlight a chip as selected.

Default Selected Default Selected Default Selected

Disabled link

Use the Disabled property to prevent user interaction with the chip.

Primary Secondary Info Success Warning Danger blockWith Icon

Events link

Handle Click and Close events to respond to user interactions.

Click a chip to select it, or remove it with the close icon.

BlazorRadzenChipComponent

Last event: none

Add / Remove link

Combine removable chips with an input to build add/remove patterns like email recipient lists.

Use the close button to remove a chip, or type a value and click Add.

To:

personpedro@example.compersonjohn@example.com

Keyboard Navigation link

The following keys provide a way for users to navigate and interact with Radzen Blazor Chip component.

Press this key To do this
Tab Move focus to the chip.
Space / Enter Click the focused chip.
Delete / Backspace Remove the focused chip when close is enabled.
All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Radzen Blazor Studio

Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙