# EuiListItemComponent

**Type:** component



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
```html
<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
```html
<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


**Selector:** `[euiListItem], eui-list-item`

## Inputs
- **e2eAttr**: `string` - 
- **isActive**: `boolean` - 
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]