# EuiIconInputComponent

**Type:** component



Container component that positions an icon relative to an input field.
Supports icon placement at the start (left) or end (right) of the input.
Typically used to enhance form inputs with visual indicators like search icons, validation states, or action triggers.

### Icon at start of input
```html
<eui-icon-input [euiIconPositionStart]="true">
  <eui-icon-svg icon="search"></eui-icon-svg>
  <input euiInputText placeholder="Search..." />
</eui-icon-input>
```

### Icon at end of input
```html
<eui-icon-input [euiIconPositionEnd]="true">
  <input euiInputText type="password" />
  <eui-icon-svg icon="visibility"></eui-icon-svg>
</eui-icon-input>
```

### Accessibility
- Icon should be decorative or have proper aria-label
- Input field maintains full keyboard accessibility
- Ensure sufficient touch target size for mobile

### Notes
- Default position is start (left in LTR)
- When both positions are true, end takes precedence
- Icon is automatically sized and positioned
- Works with all eui-input-text variants


**Selector:** `eui-icon-input`

## Inputs
- **euiIconPositionEnd**: `boolean` - Positions the icon at the end (right in LTR layouts) of the input field.
- **euiIconPositionStart**: `boolean` - Positions the icon at the start (left in LTR layouts) of the input field.