# EuiChipListComponent

**Type:** component



Container component for displaying multiple interactive chip elements as a cohesive group.
Provides semantic list structure with ARIA attributes for accessibility.
Automatically manages layout and spacing for chip collections.
Supports additional content via directives for flexible composition.
Typically used for displaying tags, filters, selected items, or multi-value selections.

```html
<eui-chip-list>
    <eui-chip><span euiLabel>Label</span></eui-chip>
</eui-chip-list>
```

With icon
```html
<eui-chip-list>
    <eui-chip><span [class]="eui-user"></span><span euiLabel>Label</span></eui-chip>
</eui-chip-list>
```

Max visible chips
```html
<eui-chip-list>
    \@for (chip of chips; let i = $index; track chip.id) {
        \@if (isMaxVisibleChipsOpened || i <= maxVisibleChipsCount) {
            <eui-chip [data]="{ id: chip.id }" [euiVariant]="chip.variant"><span euiLabel>{{ chip.label }}</span></eui-chip>
        }
    }
    <eui-chip-list-additional-content>
        \@if (maxVisibleChipsCount && chips && chips.length > maxVisibleChipsCount) {
            <button
                euiButton
                euiBasicButton
                euiSecondary
                euiSizeS
                type="button"
                class="eui-chip-list__expand-button"
                [aria-label]="isMaxVisibleChipsOpened ? 'Collapse tags' : 'Expand tags'"
                (click)="toggleTags()">
                \@if (isMaxVisibleChipsOpened) {
                    <eui-icon-svg icon="eui-chevron-left"/>
                } \@else {
                    <eui-icon-svg icon="eui-chevron-right"/>
                }
           </button>
        }
    </eui-chip-list-additional-content>
</eui-chip-list>
```

Typescript logic
```ts
public chips = [
    { id: 1, label: 'Chip label', variant: 'primary' },
];

public maxVisibleChipsCount = 2;
public isMaxVisibleChipsOpened = false;

public toggleTags(): void {
    this.isMaxVisibleChipsOpened = !this.isMaxVisibleChipsOpened;
}
```


**Selector:** `eui-chip-list`

## Inputs
- **ariaLabel**: `string` - ARIA label for the chip list container for screen reader accessibility. Provides semantic description of the chip list purpose.