eui documentation
  1. Components
  2. EuiInputGroupComponent

File

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

Description

Container component used to group input-related elements such as labels, inputs, and validation messages. euiInputGroup provides a consistent layout and styling for form controls and is required to ensure proper visual and functional integration of EUI input components. This component can only be used as an attribute selector on a div element.

Basic Usage

Example :
<div euiInputGroup>
  <label euiLabel for="email">Email</label>
  <input euiInputText id="email" type="email" />
</div>

With Validation Message

Example :
<div euiInputGroup>
  <label euiLabel for="password">Password</label>
  <input euiInputText id="password" type="password" [isInvalid]="hasError" />
  <span euiLabel euiDanger *ngIf="hasError">Password is required</span>
</div>

Accessibility

  • Groups related form elements for better screen reader navigation
  • Maintains proper label-input associations
  • Ensures validation messages are announced to assistive technologies

Notes

  • Must be used as attribute on div element only
  • Provides consistent spacing and layout for form controls
  • Supports size variants through euiSizeS input

Metadata

HostDirectives BaseStatesDirective
 Inputs : euiSizeS euiSizeVariant 
selector div[euiInputGroup]
template 
<ng-content/>
styleUrl ./eui-input-group.scss

Index

Properties
Inputs
HostBindings
Accessors

Inputs

e2eAttr
Type : string
Default value : 'eui-input-group'

Input property for setting the data-e2e attribute value. Used for end-to-end testing purposes.

HostBindings

attr.type
Type : string
Default value : 'inputGroup'

Protected property that defines the type of the input group. Bound to the host element's type attribute.
class
Type : string

Getter that returns the CSS class for the component. Bound to the host element's class attribute.

Properties

Public baseStatesDirective
Type : BaseStatesDirective
Default value : inject(BaseStatesDirective)

Accessors

cssClasses
getcssClasses()

Getter that returns the CSS class for the component. Bound to the host element's class attribute.

Returns : string

results matching ""

    No results matching ""