### 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.

### Basic Usage

Example :

    <ul euiList>
      <li euiListItem>Simple list item</li>
      <li euiListItem [isActive]="true">Active item</li>
      <li euiListItem euiPrimary>Primary styled item</li>
    </ul>

### With Icon and Label

Example :

    <li euiListItem>
      <eui-icon icon="eui-home"></eui-icon>
      <label euiLabel>Home</label>
    </li>

### Accessibility

- Uses semantic `listitem` role
- Keyboard focusable with proper tabindex management
- Active state is visually and programmatically indicated
- Supports arrow key navigation for rich content

### Notes

- Can be used as attribute `[euiListItem]` or element `<eui-list-item>`
- Supports variant styling via BaseStatesDirective
- Active state managed by parent list's FocusKeyManager

### Implements

`FocusableOption` `Highlightable`

### Metadata

HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger 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
Type : `unknown`
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 ""