eui documentation
  1. Components
  2. EuiIconInputComponent

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
HostBindings
Accessors

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
getcssClasses()

results matching ""

    No results matching ""