Componente

Input OTP

Um campo de código único dividido em slots individuais. Defina o comprimento e o padrão aceito, agrupe os slots com separadores, dimensione e colora-os, e leia o valor via binding bidirecional, formulários ou o evento de conclusão.

Código de 6 dígitos agrupado

Value: —

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

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

@Component({
  selector: 'hb-demo-input-otp-basic',
  imports: [HbInputOtpImports],
  template: `
    <div class="flex flex-col gap-3">
      <hb-input-otp [(hbValue)]="code" [hbMaxLength]="6" (hbComplete)="done.set($event)">
        <hb-input-otp-group>
          <hb-input-otp-slot [hbIndex]="0" />
          <hb-input-otp-slot [hbIndex]="1" />
          <hb-input-otp-slot [hbIndex]="2" />
        </hb-input-otp-group>
        <hb-input-otp-separator />
        <hb-input-otp-group>
          <hb-input-otp-slot [hbIndex]="3" />
          <hb-input-otp-slot [hbIndex]="4" />
          <hb-input-otp-slot [hbIndex]="5" />
        </hb-input-otp-group>
      </hb-input-otp>

      <p class="font-mono text-[12px] text-muted-foreground">
        Value: {{ code() || '—' }}{{ done() ? ' · complete' : '' }}
      </p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoInputOtpBasicComponent {
  protected readonly code = signal('');
  protected readonly done = signal('');
}

Alfanumérico e grande

Status, somente-leitura e desabilitado

Referência de API

hb-input-otp

Propriedade	Descrição	Tipo	Padrão
[hbMaxLength]	Número total de caracteres — combine com o número de slots.	number	6
[(hbValue)]	O código digitado como string. Também funciona como controle de formulário via ngModel / formControl.	string	''
[hbPattern]	Caracteres aceitos, como preset ou um RegExp que casa um caractere.	'digits' \| 'chars' \| 'alphanumeric' \| RegExp	'digits'
[hbSize] / [hbStatus]	Dimensões do slot e coloração de validação, repassadas a todos os slots.	size xs–xl / default\|success\|warning\|error	'md' / 'default'
[hbInvalid] / [hbRing]	Força a aparência de erro, e alterna o anel do slot ativo.	boolean	false / true
[hbDisabled] / [hbReadonly]	Bloqueia a edição por completo, ou mostra um valor fixo que não pode ser alterado.	boolean	false
[hbAutoFocus] / [hbName] / [hbInputId] / [hbAriaLabel]	Foca ao renderizar, e repassa name, id e aria-label ao input subjacente.	boolean / string	false / ''
(hbChange) / (hbComplete)	Emitem a cada mudança, e uma vez quando o código atinge hbMaxLength.	string	—

Parts

Propriedade	Descrição	Tipo	Padrão
hb-input-otp-group	Agrupa uma sequência de slots; use vários com separadores entre eles.	component	—
hb-input-otp-slot [hbIndex]	Uma célula de um caractere, vinculada à sua posição no valor.	number	required
hb-input-otp-separator	Um divisor visual entre grupos; projeta um ícone de traço por padrão.	component	—