Skip to content Herbst UI beta

Component

Input group

Wrap an input with addons — icons, text, or buttons — sharing one bordered, focus-aware shell. Addons align inline on either edge, or as full-width blocks above and below.

Inline addons

https://.org
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbInputDirective, HbInputGroupImports } from '@herbst/ui';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { phosphorMagnifyingGlass } from '@ng-icons/phosphor-icons/regular';

@Component({
  selector: 'hb-demo-input-group-inline',
  imports: [HbInputGroupImports, HbInputDirective, NgIcon],
  viewProviders: [provideIcons({ phosphorMagnifyingGlass })],
  template: `
    <div class="flex w-full max-w-sm flex-col gap-3">
      <hb-input-group>
        <hb-input-group-addon>
          <ng-icon name="phosphorMagnifyingGlass" />
        </hb-input-group-addon>
        <input hb-input placeholder="Search photos" />
      </hb-input-group>

      <hb-input-group>
        <hb-input-group-addon>
          <hb-input-group-text>https://</hb-input-group-text>
        </hb-input-group-addon>
        <input hb-input placeholder="herbst" />
        <hb-input-group-addon hbAlign="inline-end">
          <hb-input-group-text>.org</hb-input-group-text>
        </hb-input-group-addon>
      </hb-input-group>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoInputGroupInlineComponent {}

Block addons

Field notesMarkdown supported

API reference

hb-input-group

PropertyDescriptionTypeDefault
hb-input-group The bordered shell. Any hb-input inside becomes borderless and flex-fills; focus and invalid states propagate to the shell. component —
hb-input-group-addon [hbAlign] A slot for icons, text, or buttons around the input. 'inline-start' | 'inline-end' | 'block-start' | 'block-end' 'inline-start'
hb-input-group-text Muted helper text for use inside an addon (prefixes, suffixes, hints). component —
[class] Each part accepts a class input merged over its base styling. ClassValue ''