Componente

Input group

Envolva um input com addons — ícones, texto ou botões — compartilhando uma única casca com borda e ciente de foco. Os addons alinham inline em qualquer borda, ou como blocos de largura total acima e abaixo.

Addons inline

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 {}

Addons em bloco

Field notes

Markdown supported

Referência de API

hb-input-group

Propriedade	Descrição	Tipo	Padrão
hb-input-group	A casca com borda. Qualquer hb-input dentro fica sem borda e preenche via flex; estados de foco e inválido propagam para a casca.	component	—
hb-input-group-addon [hbAlign]	Um slot para ícones, texto ou botões ao redor do input.	'inline-start' \| 'inline-end' \| 'block-start' \| 'block-end'	'inline-start'
hb-input-group-text	Texto auxiliar esmaecido para uso dentro de um addon (prefixos, sufixos, dicas).	component	—
[class]	Cada parte aceita um input class mesclado sobre seu estilo base.	ClassValue	''