Progress Telerik UI for Blazor

Blazor Chip

  • Leverage the dynamic UI building blocks within Telerik UI for Blazor Chip component to display information in stylish containers called chips or pills.
  • This component is part of Telerik UI for Blazor—the largest suite of truly native Blazor components designed to perfectly fit any app requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing libraries and rich docs & demos to help you get started in no time.
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    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

  • Appearance

    Select the predefined appearance option that better fits your design needs by utilizing the FillMode and Rounded settings. You can either choose the Filled Chip, which sets a background color to its content, or the Outlined Chip, which sets a transparent background color and an outline.

    See the Blazor Chip Appearance demo

  • Chip Types

    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

  • Customization

    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.

  • Removable Chip

    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.

  • Disabled Chip

    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.

  • Events

    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

  • Accessibility and Keyboard Navigation

    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.

    Telerik UI for Blazor Keyboard Navigation
  • Chip Theming

    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.


All Blazor Components

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.