React Chip

Overview

The React Chip and React ChipList components let you add stylized containers, often referred to as "pills", to your React application. The React Chip component is responsible for a single "pill" and can contain text, an image or avatar (optional) and a built-in icon, such as an "X," to indicate that an action can be taken. The Chip can be used on its own or as part of other components to showcase unique values that have been selected by the user.

See React Chip demo

React Chip Component

Removable Chip

Through the removable property, React developers can configure whether the KendoReact Chip component should provide a built-in “X” icon to allow users to remove the Chip. When this property is set to false, the React Chip component will render without this icon.

See Removable React Chip demo

Removable React Chip Component

Chip Types

To provide as much flexibility as possible, the KendoReact Chip component has several readily available types, each with its own unique style. Available types include none, info, error, success and warning and can be iterated through by setting the type property.

See React Chip Types demo

React Chip Types

Disabled Chip

By default, the React Chip component is enabled. However, there may be scenarios that require the KendoReact Chip component to be disabled until a certain condition is met. With the disabled property, developers can quickly enable or disable the component through a single configuration option.

See Disabled React Chip demo

Disabled React Chip Component

Customization

The KendoReact Chip component provides several avenues for customizations. These include providing icons or avatars within the Chip content, creating a custom icon for removing a chip and setting custom CSS classes that can alter the look –and feel of the React Chip component to meet all design requirements.

See React Chip Customization demo

React Chip Component Customization

Appearance

The KendoReact Chip component has two built-in appearance options. The filled option sets a background color of the React Chip and fills in the entire content area. The outlined option displays only the outline of the Chip component.

See React Chip Appearance demo

React Chip Component Appearance

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.