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.
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.
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.
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.
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.