useChip

Headless hook for building removable chip elements with custom markup.

Apple

Amy Elsner

Removable

basic-demo

Usage#

import { useChip } from '@primereact/headless/chip';
 
const { rootProps, removeProps, state, close } = useChip({ onRemove: (e) => {} });
 
return (
    <>
        {
            state.visible && (
                <div {...rootProps}>
                    <span></span>
                    <span {...removeProps}></span>
                </div>
            );
        }
    </>
)

useChip manages visibility state and provides spread-ready props for the root and remove elements — see Primitive for a component-based API.

Features#

Visibility state management with state.visible
Spread-ready removeProps with click and keyboard handlers (Enter, Backspace)
Imperative close method for programmatic removal
onRemove callback for reacting to dismissal

Behavior#

Removable#

Pass onRemove to enable removal. Spread removeProps on the dismiss element to wire up click and keyboard handlers automatically.

const { rootProps, removeProps, state } = useChip({
    onRemove: (e) => console.log('removed', e.originalEvent)
});
 
{
    state.visible && (
        <div {...rootProps}>
            <span>Tag</span>
            <span {...removeProps}>x</span>
        </div>
    );
}

Conditional Rendering with `state.visible`#

state.visible starts as true and becomes false after close is called. Use it to conditionally render or unmount the chip element.

{
    state.visible && <div {...rootProps}>...</div>;
}

Imperative Close#

Call close(event) to programmatically dismiss the chip from an external trigger.

const { close } = useChip({ onRemove: (e) => {} });
 
<button onClick={(e) => close(e)}>Dismiss</button>;

Custom Styling with Data Attributes#

[data-scope='chip'][data-part='root'] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

API#

useChip#

Name	Type	Default
`onRemove`	`(event: useChipRemoveEvent) => void`	—
Callback fired when the chip is removed.

Accessibility#

See Chip Primitive for WAI-ARIA compliance details and keyboard support.