Blazor Chip

Create compelling UX by listing items in stylish containers called chips or pills with the Telerik UI for Blazor Chip component. This small building block component can contain text, an image, avatar or a close or delete icon to indicate optional call-to-action. You can leverage the Chip exclusively or alongside other components to showcase unique values that have been selected by the user.

See the Blazor Chip component demo

Play with the multiple appearance option within the Telerik UI for Blazor Chip to better fit your design needs. The FillMode controls the component background, while the RemoveIcon defines what icon will be used for chip removal. Rounded configures the chip corners and the Size adjusts the chip dimensions. Last but not least, the ThemeColor allows the chip to apply one of a set of predefined theme colors to the text color and background color.

See the Blazor Chip Appearance demo

The Telerik UI for Blazor Chip component comes with multiple ready-to-use types, each with its own style. Save time and efforts by leveraging the already available base, info, error, success and warning chip types.

See the Blazor Chip Types demo

The Telerik UI for Blazor Chip component is equipped with multiple customization options, enabling you to include icons, images, avatars, custom icons, links or any other content within the chip. Alter the look and feel of the Blazor Chip component by simply setting custom CSS classes.

Easily configure whether the Telerik UI for Blazor Chip should provide a built-in close or delete icon through the removable property. This will enable users to remove certain chips from the list of available items with a single click. If the property is set to false, the Blazor Chip component will render without this icon.

Meet all use case scenarios including those that require the Blazor Chip component to be disabled until a specific condition is met, e.g., when certain items are not available at the moment. Although, the Chip component is enabled by default, you can use the disabled property to quickly disable the component or vice versa.

To ensure smooth interaction, the Telerik UI for Blazor Chip component exposes different events related to user interaction - clicking, selection and removal.

Check out the Blazor Chip events demo

Leverage the Ocean Blue A11Y color swatch within the Telerik UI for Blazor Chip component to ensure AY11 compliance—it addresses corner cases for color contrast. Moreover, with this component you can navigate around and invoke all actions using the keyboard alone.

The Telerik UI for Blazor Chip component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which looks like the Bootstrap styling to integrate better) and Fluent (based on Microsoft Fluent UI). You can easily customize any of out-of-the-box themes, style a specific component instance or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.

The Telerik UI for Blazor Chip component supports right-to-left configuration. The RTL functionality is supported by most of our components to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.

Learn more in our Blazor Right-to-Left Support documentation