eui documentation
  1. Components
  2. EuiChipComponent

File

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

Description

Chips are compact elements that allow users to enter information, select a choice, filter content or trigger an action. The eui-chip component can also be displayed dynamically as a group of multiple interactive elements, see eui-chip-list.

Basic chip

Example :
<eui-chip>Chip label</eui-chip>

Chip with color variant

Example :
<eui-chip euiPrimary>Primary</eui-chip>
<eui-chip euiSuccess>Success</eui-chip>

Removable chip

Example :
<eui-chip [isChipRemovable]="true" (remove)="onRemove($event)">
  Removable
</eui-chip>

Chip with icon

Example :
<eui-chip>
  <eui-icon-svg icon="user:outline"></eui-icon-svg>
  User
</eui-chip>

Filled chip with tooltip

Example :
<eui-chip
  [isFilled]="true"
  euiTooltip="Additional information"
  tooltipMessage="Chip details">
  Info
</eui-chip>

Size variants

Example :
<eui-chip euiSizeS>Small</eui-chip>
<eui-chip>Default</eui-chip>
Example :
onRemove(data: any): void {
  console.log('Chip removed:', data);
}

Accessibility

  • Uses role="status" for screen reader announcements (changes to "listitem" within eui-chip-list)
  • aria-label provides context about chip content (default: "Chip content")
  • Removable chips have keyboard accessible remove button (Enter/Space)
  • Backspace key can also remove chips when focused
  • Icon-only chips should have descriptive aria-label
  • Color variants provide visual meaning supplemented by text

Notes

  • Can be used as element (eui-chip) or attribute (span[euiChip], li[euiChip])
  • Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger
  • Size variants: euiSizeS, default (medium)
  • isChipRemovable adds close button and enables removal
  • isFilled applies solid background color instead of outline
  • euiOutline applies outline/ghost styling
  • euiDisabled disables interaction
  • colorPalette accepts custom color palette names for extended theming
  • tooltipMessage displays tooltip on hover
  • id and euiInternalId for identification (euiInternalId used internally for tracking)
  • data property holds chip metadata including tooltip configuration
  • remove event emits chip data when removed
  • Supports icon content via eui-icon-svg child component
  • Automatically sets role="listitem" when used within eui-chip-list
  • Commonly used in eui-chip-list for managing multiple chips

Implements

AfterContentInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
HostDirectives BaseStatesDirective
 Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiVariant euiSizeS euiSizeVariant euiOutline euiDisabled 
selector eui-chip, span[euiChip], li[euiChip]
imports EUI_ICON EUI_ICON_BUTTON
templateUrl ./eui-chip.component.html
styleUrl ./eui-chip.scss

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

ariaLabel
Type : string
Default value : 'Chip content'

Sets the aria-label attribute for the host element.
colorPalette
Type : string

Extra color palette to be used on the chip.
data
Type : any
Default value : { id: crypto.randomUUID(), tooltip: { color: 'euiTooltipPrimary', contentAlignment: null, position: 'above', }, }

Sets the data of the chip like tooltip configuration.
e2eAttr
Type : string
Default value : 'eui-chip'

Sets the data-e2e attribute for the host element.
euiInternalId
Type : string
Default value : null

Sets the euiInternalId of the chip.
id
Type : string | number

Sets the id of the chip.
isChipRemovable
Type : boolean
Default value : false

Wether the chip can be removed.
isFilled
Type : boolean
Default value : false

Wether the chip is filled with color.
tooltipMessage
Type : string

Sets the label of the tooltip to diaply on hover.

Outputs

remove
Type : EventEmitter

Event emitted when the chip is removed.

HostBindings

attr.role
Type : string
Default value : 'status'

Sets the role attribute for the host element.
class
Type : string

Computes and returns the CSS classes for the component based on its current state.

Methods

Public onRemove
onRemove(event?: Event)

Remove chip handler

Parameters :
Name Type Optional Description
event Event Yes

Click event
Returns : void

Properties

baseStatesDirective
Type : unknown
Default value : inject(BaseStatesDirective)
chipLabel
Type : ElementRef<HTMLInputElement>
Decorators :
@ViewChild('chipLabel')
euiIcons
Type : QueryList<EuiIconSvgComponent>
Decorators :
@ContentChildren(undefined)

Icon declares by user in the chip
role
Type : string
Default value : 'status'
Decorators :
@HostBinding('attr.role')

Sets the role attribute for the host element.

Accessors

cssClasses
getcssClasses()

Computes and returns the CSS classes for the component based on its current state.

Returns : string

results matching ""

    No results matching ""