# EuiTreeListToolbarComponent

**Type:** component



Toolbar component for eui-tree-list providing filter and expand/collapse controls.
Displays search input for filtering tree items and buttons for expanding or collapsing all items.
Automatically emits filter events on initialization if filter value is provided.
Manages toggle state for expand/collapse button display.
Must be used within eui-tree-list component to control tree list behavior.

### Basic Usage
```html
<!-- Toolbar is typically used internally by eui-tree-list -->
<eui-tree-list [isShowToolbar]="true">
  <eui-tree-list-item label="Item 1" />
  <eui-tree-list-item label="Item 2" />
</eui-tree-list>

<!-- Custom labels -->
<eui-tree-list
  [isShowToolbar]="true"
  filterLabel="Search items..."
  expandAllLabel="Expand"
  collapseAllLabel="Collapse">
  <!-- items -->
</eui-tree-list>
```

```typescript
// Listen to toolbar events
onFilter(keyword: string): void {
  console.log('Filtering by:', keyword);
}

onExpandAll(): void {
  console.log('All items expanded');
}
```

### Accessibility
- Search input has proper placeholder and label
- Expand/collapse buttons have aria-labels
- Icons have descriptive aria-labels
- Keyboard accessible controls

### Notes
- Automatically managed by parent eui-tree-list component
- Filter emits on initialization if filterValue is set
- Toggle button switches between expand and collapse states
- Supports icon-only buttons when labels are empty strings
- Clearable search input for easy filter reset


**Selector:** `eui-tree-list-toolbar`

## Inputs
- **collapseAllLabel**: `string` - The label for the collapse all button
- **e2eAttr**: `string` - 
- **expandAllLabel**: `string` - The label for the expand all button
- **filterLabel**: `string` - The value of the filter placeholder
- **filterValue**: `string` - The value of the filter input
- **hasLabels**: `boolean` - 
- **isFilterVisible**: `boolean` - 
- **isToggleExpanded**: `boolean` - Option that toggles the expanded/collapsed state of the corresponding button
- **isToggleVisible**: `boolean` - 
- **isVisible**: `boolean` - Shows or hides the toolbar

## Outputs
- **collapseAll**: `EventEmitter` - Event emitted when the collapse all button is clicked.
- **expandAll**: `EventEmitter` - Event emitted when the expand all button is clicked.
- **filter**: `EventEmitter` - Event emitted if there is or if a filter value changes.
