# EuiInputGroupComponent

**Type:** component



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
```html
<div euiInputGroup>
  <label euiLabel for="email">Email</label>
  <input euiInputText id="email" type="email" />
</div>
```

### With Validation Message
```html
<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


**Selector:** `div[euiInputGroup]`

## Inputs
- **e2eAttr**: `string` - Input property for setting the data-e2e attribute value. Used for end-to-end testing purposes.
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]