React Chip Component API

Chip API

Explore the API reference for the React Chip and React Chip Component to customize variants, remove behavior, sizes, and interactions.

On this page

CChip

jsx
import { CChip } from '@coreui/react-pro'
PropertyDefaultType
active-boolean, undefined

Toggles the active state of the React Chip component for non-selectable usage.

ariaRemoveLabelRemovestring, undefined

Provides an accessible label for the remove button in the React Chip component.

asspan(ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'span'), (ElementType & 'filter'), (ElementType & 'slot'), ... 175 more ..., undefined

Specifies the root element or custom component used by the React Chip component.

className-string, undefined

Adds custom classes to the React Chip root element.

clickable-boolean, undefined

Enables interactive hover styling and pointer cursor for the React Chip component.

color-'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string

Sets the contextual color of the React Chip component using CoreUI theme colors.

disabled-boolean, undefined

Disables the React Chip component and removes interactive behavior.

filter-boolean, undefined

Turns the React Chip component into a filter chip. A filter chip is selectable and shows a leading check icon while selected.

onDeselect-((event: MouseEvent<HTMLElement, MouseEvent> | KeyboardEvent<HTMLElement>) => void), undefined

Callback fired when the React Chip component becomes deselected.

onRemove-((event: KeyboardEvent<HTMLElement> | MouseEvent<HTMLButtonElement, MouseEvent>) => void), undefined

Callback fired when the React Chip component requests removal by button click or keyboard action.

onSelect-((event: MouseEvent<HTMLElement, MouseEvent> | KeyboardEvent<HTMLElement>) => void), undefined

Callback fired when the React Chip component becomes selected.

onSelectedChange-((selected: boolean, event: MouseEvent<HTMLElement, MouseEvent> | KeyboardEvent<HTMLElement>) => void), undefined

Callback fired when the selected state of the React Chip component changes.

removable-boolean, undefined

Displays a remove button inside the React Chip component.

removeIcon-ReactNode

Replaces the default remove icon with a custom icon node in the React Chip component.

selectable-boolean, undefined

Enables selectable behavior and keyboard toggle support for the React Chip component.

selected-boolean, undefined

Controls the selected state of a selectable React Chip component.

selectedIcon-ReactNode

Replaces the default selected icon shown by a filter React Chip component with a custom icon node.

size-'sm', 'lg', undefined

Sets the size of the React Chip component to small or large.

value-string, undefined

Sets the value associated with the React Chip component, used by CChipSet to track selection.

variant-'outline', undefined

Sets the visual variant of the React Chip component to outline style.