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.

• O valor for estritamente monetário com prefixo textual fixo (ex.: "R$") — use mk-input com mask="brl".

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>

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>

Í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

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.

mkInput é emitido a cada alteração; mkChange é emitido quando o valor muda de fato (no evento nativo change, 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.
• 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.