Componente

Input

Uma diretiva que estiliza elementos nativos <input> e <textarea>. Escolha um tamanho, sinalize o status de validação, alterne a borda e o anel de foco, e adicione diretivas numérica, de moeda ou de máscara para entrada restrita.

Tamanhos, fluido e textarea

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbInputDirective } from '@herbst/ui';

@Component({
  selector: 'hb-demo-input-sizes',
  imports: [HbInputDirective],
  template: `
    <div class="flex w-full max-w-sm flex-col gap-3">
      <input hb-input hbSize="xs" placeholder="Extra small" />
      <input hb-input hbSize="sm" placeholder="Small" />
      <input hb-input hbSize="md" placeholder="Medium (default)" />
      <input hb-input hbSize="lg" placeholder="Large" />
      <input hb-input hbSize="xl" placeholder="Extra large" />
      <input hb-input hbFluid placeholder="Fluid — fills its container" />
      <textarea hb-input hbFluid placeholder="Textarea auto-grows with content"></textarea>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoInputSizesComponent {}

Status, anel e sem borda

Numérico, moeda e máscara

Value: —

Referência de API

input[hb-input] / textarea[hb-input]

Propriedade	Descrição	Tipo	Padrão
[hbSize]	Controla a altura e a escala do texto.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
[hbStatus]	Coloração de validação para a borda e o anel de foco.	'default' \| 'success' \| 'warning' \| 'error'	'default'
[hbInvalid]	Define aria-invalid e aplica o estilo destrutivo, independente de hbStatus.	boolean	false
[hbBorderless]	Remove a borda, o fundo e a sombra — para embutir em grupos.	boolean	false
[hbRing]	Alterna o anel de foco-visível.	boolean	true
[hbFluid]	Estica até a largura total do container em vez de dimensionar ao conteúdo.	boolean	false

Companion directives

Propriedade	Descrição	Tipo	Padrão
input[hbNumeric]	Restringe a digitação a dígitos. [hbSign] = both \| positive \| negative, [hbDecimal] permite um ponto.	directive	hbSign 'both', hbDecimal false
input[hbCurrency]	Formata como moeda ao digitar. Código [hbCurrency], [hbLocale] e [(hbCurrencyValue)] bidirecional como número.	directive	hbCurrency 'USD'
input[hbMask]	Rejeita entrada que não corresponde ao padrão. [hbMask] aceita uma string ou RegExp.	directive	''