### File

`packages/components/eui-chip-list/eui-chip-list.component.ts`

### Description

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.

Example :

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

With icon

Example :

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

Max visible chips

Example :

    <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

Example :

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

    public maxVisibleChipsCount = 2;
    public isMaxVisibleChipsOpened = false;

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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-chip-list`
styleUrls | `./chip-list.scss`
templateUrl | `./eui-chip-list.component.html`

### Index

###### Inputs

- ariaLabel

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

ariaLabel
Type : `string`
Default value : `'eUI Chip list'`
ARIA label for the chip list container for screen reader accessibility. Provides semantic description of the chip list purpose.

### HostBindings

class
Type : `string`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""