Chip Group

The Chip Group component displays a group of chip notifications in a uniform position, supports ref methods.

Usage & Examples

Default

    default.tsx
    <ChipGroup chips={chips} onRemove={(id) => setChips(prev => prev.filter(c => c.id !== id))} />

    Props API

    8 props
    Columns
    Chip Group props API
    Default
    Description
    childrenundefinedNoprops—Children are not allowed when using `chips`.
    chipsChipProps[]Noprops—Chips array is not allowed when using children.
    classNamestringNostyling—Optional class name for the chip group container.
    data-testidstringNotesting—Backward-compatible alias for test ID attributes.
    onRemove((id: string) => void)Noevents—Optional callback when a chip is removed.
    positionPositionTypeNoprops"topCenter"Default position for chips in the group.
    sizeSizeTypeNostylingconfigured default size (fallback: "medium")Default size for chips if not individually specified.
    testIdstringNopropsdataTestId ?? "chip-group"Optional test ID for testing frameworks.