# EuiListItemComponent

**Type:** component

<p>Component that represents a single item within an EuiList.
Implements FocusableOption and Highlightable for keyboard navigation and accessibility.</p>
<p>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.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;ul euiList&gt;
  &lt;li euiListItem&gt;Simple list item&lt;/li&gt;
  &lt;li euiListItem [isActive]=&quot;true&quot;&gt;Active item&lt;/li&gt;
  &lt;li euiListItem euiPrimary&gt;Primary styled item&lt;/li&gt;
&lt;/ul&gt;</code></pre></div><h3>With Icon and Label</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;li euiListItem&gt;
  &lt;eui-icon icon=&quot;eui-home&quot;&gt;&lt;/eui-icon&gt;
  &lt;label euiLabel&gt;Home&lt;/label&gt;
&lt;/li&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Uses semantic <code>listitem</code> role</li>
<li>Keyboard focusable with proper tabindex management</li>
<li>Active state is visually and programmatically indicated</li>
<li>Supports arrow key navigation for rich content</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Can be used as attribute <code>[euiListItem]</code> or element <code>&lt;eui-list-item&gt;</code></li>
<li>Supports variant styling via BaseStatesDirective</li>
<li>Active state managed by parent list&#39;s FocusKeyManager</li>
</ul>


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

**Standalone:** false

## Inputs

- **e2eAttr**: `string` - 
- **isActive**: `boolean` - 
