### 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
Public baseStatesDirective
###### Inputs
e2eAttr
###### HostBindings
attr.type class
###### Accessors
cssClasses

### 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
get `cssClasses()`
Getter that returns the CSS class for the component. Bound to the host element's class attribute. Returns : `string`

# results matching ""

# No results matching ""