eui documentation
  1. Components
  2. EuiChipListComponent

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
HostBindings
Accessors

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
getcssClasses()

results matching ""

    No results matching ""