# EuiToolbarSelectorComponent

**Type:** component



Toolbar selector component providing a clickable button with icon and label for triggering selection actions.
Typically used for context switching, workspace selection, or opening dropdown menus in the toolbar.
Integrates with EuiAppShellService for responsive behavior and theme coordination.
Supports disabled state and emits click events for parent components to handle selection logic.

```html
<eui-app>
  <eui-app-toolbar>
    <eui-toolbar>
      <eui-toolbar-selector
        label="Select Workspace"
        iconSvgName="chevron-down:outline"
        [euiDisabled]="false"
        (selectorClick)="onSelectorClick()">
      </eui-toolbar-selector>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>
```
```typescript
onSelectorClick(): void {
  // Open dropdown or handle selection
  console.log('Selector clicked');
}
```

### Accessibility
- Button keyboard accessible
- Disabled state prevents interaction
- Label provides context
- Icon enhances visual affordance
- Focus visible for keyboard navigation
- Click events properly handled

### Notes
- Must be used within eui-toolbar for proper layout
- Positioned in toolbar content area
- label for button text (optional)
- iconSvgName for button icon (optional)
- euiDisabled to disable button (default: false)
- selectorClick event emits true on click
- Common use: workspace/context switching
- Often paired with dropdown menus
- Integrates with EuiAppShellService
- Responsive behavior inherited from toolbar
- Button styling follows EUI button patterns


**Selector:** `eui-toolbar-selector`

## Inputs
- **euiDisabled**: `boolean` - Disables the selector button preventing user interaction. When true, button is visually disabled and click events are not emitted.
- **iconSvgName**: `string` - SVG icon name displayed on the selector button. Follows EUI icon naming convention (e.g., 'chevron-down:outline'). Optional.
- **label**: `string` - Text label displayed on the selector button. Provides context for what the selector controls or represents. Optional.

## Outputs
- **selectorClick**: `EventEmitter<boolean>` - Emitted when the selector button is clicked. Payload: boolean - always emits true to indicate click occurred Triggered when user clicks the selector button and it is not disabled.