eui documentation
  1. Components
  2. EuiInputButtonComponent

File

packages/components/eui-input-button/eui-input-button.component.ts

Description

A layout component that positions button elements relative to input fields. Enables the creation of input groups with leading or trailing action buttons, commonly used for search inputs, password visibility toggles, or clear actions.

Button at end of input (default)

Example :
<eui-input-button>
  <input euiInputText placeholder="Search..." />
  <button euiButton euiPrimary>Search</button>
</eui-input-button>

Button at start of input

Example :
<eui-input-button [euiButtonPositionStart]="true">
  <button euiIconButton icon="filter" ariaLabel="Filter"></button>
  <input euiInputText placeholder="Filter results..." />
</eui-input-button>

Accessibility

  • Button and input maintain separate focus states
  • Ensure button has descriptive label or aria-label
  • Tab order follows visual layout

Notes

  • Default position is end (right in LTR)
  • When euiButtonPositionStart is true, it overrides end positioning
  • Works with all button variants (euiButton, euiIconButton)
  • Commonly used for search, clear, and submit actions

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-input-button
styleUrls ./eui-input-button.component.scss
templateUrl ./eui-input-button.component.html

Index

Inputs
HostBindings
Accessors

Inputs

euiButtonPositionEnd
Type : boolean
Default value : true

Positions the button at the end (right in LTR, left in RTL) of the input field. Ignored when euiButtonPositionStart is true. Defaults to true.
euiButtonPositionStart
Type : boolean
Default value : false

Positions the button at the start (left in LTR, right in RTL) of the input field. When true, overrides euiButtonPositionEnd. Defaults to false.

HostBindings

class
Type : string

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""