Input Number

O mk-input-number extrai a fatia numérica do mk-input: reaproveita sua estrutura visual, estados e a mesma lógica de formatação calculator-style, substituindo o toggle de senha/contador de caracteres por um bloco de incremento/decremento com setas empilhadas. Por padrão o campo é inteiro (agrupado por milhar conforme o locale); defina decimals para aceitar e exibir casas decimais.

Quando usar

• O valor precisar de agrupamento por milhar conforme o locale, inteiro ou decimal (quantidade, preço, medida, taxa).

• O usuário se beneficiar de ajustes finos via botões de step, além da digitação direta.

• O valor for um inteiro simples sem agrupamento por milhar — use mk-number-field.

Padrão

import { MkInputNumber } from '@db1/makuco-ui-react';

<MkInputNumber label="Quantidade" />

<mk-input-number label="Quantidade"></mk-input-number>

Limites (min/max)

Use min e max para restringir o intervalo aceito. Os botões de step ficam disabled automaticamente ao atingir cada limite. Definir min negativo também habilita o dígito - na digitação.

<MkInputNumber label="Quantidade" min={0} max={999} value={10} />

<mk-input-number label="Quantidade" [min]="0" [max]="999" [value]="10"></mk-input-number>

Passo (step)

Use step para controlar o incremento/decremento aplicado pelos botões de step e pelas setas ↑/↓ do teclado. step é sempre um número inteiro, mesmo quando decimals for maior que zero.

<MkInputNumber label="Quantidade" step={5} value={10} />

<mk-input-number label="Quantidade" [step]="5" [value]="10"></mk-input-number>

Casas decimais e locale

Por padrão (decimals omitido ou 0) o campo é um inteiro agrupado por milhar. Defina decimals com um valor maior que 0 para aceitar e exibir casas decimais. Use locale para controlar os separadores de milhar/decimal — quando omitido, o componente usa o atributo lang do ancestral mais próximo, recaindo para pt-BR.

<MkInputNumber label="Price" locale="en-US" decimals={2} value={1234.56} />

<mk-input-number
  label="Price"
  locale="en-US"
  [decimals]="2"
  [value]="1234.56"
></mk-input-number>

Entrada natural

Por padrão (entryMode="calculator") os dígitos entram pela direita e preenchem os decimais primeiro: com decimals={2}, digitar 1, 2, 3 mostra 0,01 → 0,12 → 1,23. Com entryMode="natural" a edição é a nativa do campo, da esquerda para a direita (1 → 12 → 123), sem separador de milhar. O que vem depois do separador decimal do locale (, em pt-BR, ou a tecla Decimal do teclado numérico) é a parte decimal, e os decimais são completados com zeros quando o campo perde o foco (12,5 → 12,50). Letras, símbolos (inclusive . em pt-BR), um segundo separador e dígitos além de decimals são recusados; texto colado é filtrado (1.234,56 → 1234,56). currency é ignorado neste modo.

<MkInputNumber label="Preço" decimals={2} entryMode="natural" />

<mk-input-number label="Preço" [decimals]="2" entry-mode="natural"></mk-input-number>

Seleção ao focar

Com selectOnFocus, todo o texto fica selecionado quando o campo recebe foco (clique, Tab ou focus()), e a digitação substitui o valor. Um clique com o campo já focado posiciona o cursor. Funciona nos dois modos de entrada.

<MkInputNumber label="Preço" decimals={2} value={1234.5} selectOnFocus />

<mk-input-number label="Preço" [decimals]="2" [value]="1234.5" select-on-focus></mk-input-number>

Valores negativos

Definir min com um valor negativo habilita o dígito - na digitação e permite que o botão de decremento leve o valor abaixo de zero.

<MkInputNumber label="Saldo" min={-100} decimals={2} value={-25.5} />

<mk-input-number
  label="Saldo"
  [min]="-100"
  [decimals]="2"
  [value]="-25.5"
></mk-input-number>

Valor como string

valueAsString expõe o valor como string decimal exata, com . como separador (ex.: "12.3456"). A prop acompanha value e, ao ser definida, aplica o valor ao campo. Use em decimais que perdem precisão como number, como taxas de juros com 4 casas decimais.

<MkInputNumber label="Taxa de juros" decimals={4} valueAsString="1.2345" />

<mk-input-number label="Taxa de juros" [decimals]="4" value-as-string="1.2345"></mk-input-number>

Valores monetários

Com currency="BRL", o campo exibe o prefixo R$, fixa 2 casas decimais e usa os separadores pt-BR, no mesmo formato do mask="brl" de mk-input. decimals e locale são ignorados.

<MkInputNumber label="Preço" currency="BRL" />

<mk-input-number label="Preço" currency="BRL"></mk-input-number>

Rótulo oculto

Use hideLabel para ocultar o rótulo visualmente. O label continua associado ao campo e mantém o nome acessível.

<MkInputNumber label="Quantidade" hideLabel />

<mk-input-number label="Quantidade" hide-label></mk-input-number>

Ícone trailing

Use trailingIcon para indicar uma unidade ou moeda antes do bloco de spinners. Defina trailingIconLabel para torná-lo interativo — o ícone passa a emitir mkTrailingIconClick ao ser ativado (clique, Enter ou Espaço).

<MkInputNumber label="Taxa" trailingIcon="percent" />

<mk-input-number label="Taxa" trailing-icon="percent"></mk-input-number>

Texto de suporte

<MkInputNumber label="Preço" decimals={2} supportText="Informe o valor unitário do produto" />

<mk-input-number
  label="Preço"
  [decimals]="2"
  support-text="Informe o valor unitário do produto"
></mk-input-number>

Estado de erro

<MkInputNumber label="Preço" decimals={2} errorMessage="Este campo é obrigatório" />

<mk-input-number
  label="Preço"
  [decimals]="2"
  error-message="Este campo é obrigatório"
></mk-input-number>

Obrigatório

<MkInputNumber label="Preço" required />

<mk-input-number label="Preço" required></mk-input-number>

Desabilitado e somente leitura

<MkInputNumber label="Desabilitado" value={10} disabled />
<MkInputNumber label="Somente leitura" value={10} readonly />

<mk-input-number label="Desabilitado" [value]="10" [disabled]="true"></mk-input-number>
<mk-input-number label="Somente leitura" [value]="10" [readonly]="true"></mk-input-number>

Formulários

O mk-input-number é form-associated e integra com <form> nativo via name. A tecla Enter aciona o submit do formulário pai.

<form onSubmit={handleSubmit}>
  <MkInputNumber label="Preço" name="preco" min={0} required />
  <MkButton type="submit">Enviar</MkButton>
</form>

<form (ngSubmit)="handleSubmit()">
  <mk-input-number label="Preço" name="preco" [min]="0" required></mk-input-number>
  <mk-button type="submit">Enviar</mk-button>
</form>

Comportamento

Por padrão a digitação segue o estilo calculadora: dígitos entram pela direita, deslocando os anteriores, e a formatação de milhar/decimal é aplicada automaticamente conforme decimals/locale. Letras, acentos e símbolos são ignorados. Os botões de incremento/decremento aplicam step a cada clique e desabilitam automaticamente ao atingir min/max; eles ficam fora da ordem de tabulação — o acesso via teclado se dá pelas setas ↑/↓ com o campo focado.

Com entryMode="natural", a edição é a nativa do campo, sem separador de milhar. Ver Entrada natural.

mkInput é emitido a cada alteração; mkChange é emitido quando o valor muda de fato, ao perder o foco, ou imediatamente após um clique num botão de step.

Autofill do navegador

Defina autocomplete com um token do HTML para habilitar o autofill do navegador.

<MkInputNumber label="Número" name="address-line2" autocomplete="address-line2" />

<mk-input-number
  label="Número"
  name="address-line2"
  autocomplete="address-line2"
></mk-input-number>

Props — mk-input-number

Eventos

Acessibilidade

• Usa <input> nativo internamente (inputMode="decimal") — foco e navegação por teclado estão inclusos.
• Os botões de decremento e incremento são <button> nativos com aria-label traduzido ("Diminuir"/"Aumentar" conforme locale); os ícones internos são aria-hidden. Eles ficam fora da ordem de tabulação (tabIndex={-1}) — o acesso via teclado se dá pelas setas ↑/↓ com o campo focado, não por Tab.
• aria-invalid="true" aplicado automaticamente quando errorMessage está definida.
• aria-describedby aponta para o texto de suporte ou mensagem de erro.
• Com hideLabel, o label permanece como nome acessível do campo.
• O divisor entre o campo e o bloco de spinners usa role="separator" e é aria-hidden.
• Com delegatesFocus: true, o foco é delegado ao <input> interno ao clicar no host.