### File

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

### Description

Component that represents a single item within an EuiList. Implements FocusableOption and Highlightable for keyboard navigation and accessibility.

This component is designed to work with the EuiListComponent as part of a navigable list. It supports various display states through the BaseStatesDirective, and can contain nested list components, icons, labels, and custom templates.

### Implements

`FocusableOption` `Highlightable`

### Metadata

HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiAccent euiVariant
selector | `[euiListItem], eui-list-item`
templateUrl | `./eui-list-item.component.html`
styleUrl | `./eui-list-item.scss`

### Index

###### Properties
baseStatesDirective euiArrowKeyNavigableDirective euiIconSvgComponent euiLabelComponent euiListComponent role tabindex templates
###### Methods
Public click Public focus Public setActiveStyles Public setInactiveStyles
###### Inputs
e2eAttr isActive
###### HostBindings
attr.role attr.tabindex class
###### Accessors
cssClasses

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-list-item'`

isActive
Type : `boolean`
Default value : `false`

### HostBindings

attr.role
Type : `string`
Default value : `'listitem'`

attr.tabindex
Type : `string`
Default value : `'-1'`

class
Type : `string`

### Methods

Public click
`click()`
Programmatically triggers a click event on the list item element. Typically, invoked when the user presses Enter while the item is focused. Returns : `void`

Public focus
`focus()`
Sets focus on the list item element. Used by the FocusKeyManager to handle keyboard navigation within the list. Returns : `void`

Public setActiveStyles
`setActiveStyles()`
Applies active styling to the list item. Called by the FocusKeyManager when this item becomes the active item in the list. Sets the isActive flag to true, which adds the 'eui-list-item--active' CSS class. Returns : `void`

Public setInactiveStyles
`setInactiveStyles()`
Removes active styling from the list item. Called by the FocusKeyManager when another item becomes the active item. Sets the isActive flag to false, removing the 'eui-list-item--active' CSS class. Returns : `void`

### Properties

baseStatesDirective
Default value : `inject(BaseStatesDirective)`

euiArrowKeyNavigableDirective
Type : `EuiArrowKeyNavigableDirective`
Decorators : `@ContentChild(undefined)`

euiIconSvgComponent
Type : `QueryList<EuiIconSvgComponent>`
Decorators : `@ContentChildren(undefined, {descendants: true})`

euiLabelComponent
Type : `QueryList<EuiLabelComponent>`
Decorators : `@ContentChildren(undefined, {descendants: true})`

euiListComponent
Type : `QueryList<EuiListComponent>`
Decorators : `@ContentChildren(undefined, {descendants: true})`

role
Type : `string`
Default value : `'listitem'`
Decorators : `@HostBinding('attr.role')`

tabindex
Type : `string`
Default value : `'-1'`
Decorators : `@HostBinding('attr.tabindex')`

templates
Type : `QueryList<EuiTemplateDirective>`
Decorators : `@ContentChildren(undefined, {descendants: true})`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""