### File

`packages/components/eui-icon-input/eui-icon-input.component.ts`

### Description

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

Example :

    <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

Example :

    <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

### Metadata

selector | `eui-icon-input`
styleUrls | `./eui-icon-input.component.scss`
templateUrl | `./eui-icon-input.component.html`

### Index

###### Inputs

- euiIconPositionEnd
- euiIconPositionStart

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

euiIconPositionEnd
Type : `boolean`
Default value : `false`
Positions the icon at the end (right in LTR layouts) of the input field.

euiIconPositionStart
Type : `boolean`
Default value : `true`
Positions the icon at the start (left in LTR layouts) of the input field.

### HostBindings

class
Type : `string`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""