InputGroup

Basic

Combine an input with a prefix or suffix. Each addon forms a separate segment.

Multiple addons

Use several segments for currency, units and other context.

Buttons

Place actions before or after the input, directly in the group or inside an addon.

Checkbox and radio

Interactive addons keep their own accessible name and keyboard behavior.

Float label and IconField

Place a floating label or an icon field between the addons.

Sizes and direction

Set avSize on each input and button. Addons follow the input height; corners follow text direction.

Reactive forms

Form state belongs to the input. Validation and reset work without a group-specific value API.

Usage and API

import { AvInputGroup, AvInputGroupAddon, AvInput, AvButton } from 'avero-ui';

<label for="price">Price</label>
<av-input-group>
  <av-input-group-addon id="currency">USD</av-input-group-addon>
  <input avInput id="price" type="number" min="0"
    aria-describedby="currency" [formControl]="price" />
  <av-input-group-addon>.00</av-input-group-addon>
</av-input-group>

<label for="query">Search</label>
<av-input-group>
  <input avInput id="query" [(ngModel)]="query" />
  <button avButton type="button" (click)="search()">Search</button>
</av-input-group>

Import AvInputGroup and AvInputGroupAddon alongside the controls you use. These are layout components with content projection and no inputs or outputs. Direct native avInput fields, avButton buttons, AvIconField and AvFloatLabel are styled as connected segments. Use direct addon children for text, icons or independently labeled controls. Composite controls such as Dropdown and InputNumber are not styled by this implementation.

Label every input and interactive addon. Associate meaningful prefixes and units with aria-describedby; hide purely decorative icons using aria-hidden. The group adds no role, focus stop or form accessor. Native tab order and Angular form bindings remain unchanged. Disable each control explicitly when needed.

Groups stay on one line; keep addon content short on small screens. Customize --av-input-group-radius, --av-input-group-border, --av-input-group-addon-background, --av-input-group-addon-color and --av-input-group-addon-padding.

Reference: PrimeNG InputGroup.