Docs›Componentes (Admin)›mad-numeric-field
Componentes (Admin)

mad-numeric-field

Decimal formatado pt-BR (peso, fator, cotação).

Campo decimal formatado em pt-BR — <input type="text" inputmode="decimal"> controlado por Alpine (madNumericField). Diferente do <mad-number-field> (input nativo HTML5, sem mascara) e do <mad-money-field> (mascara reversa estilo calculadora de caixa): aqui o usuario digita normalmente e o valor e reformatado com separador de milhar pt-BR ao sair do campo (blur). Use para decimais nao-monetarios: peso, cotacao, fator, medidas.

Como funciona

O input visivel mostra display (string formatada); um <input type="hidden" name="..."> carrega rawValue (float cru) com mad:model="{name}" ja embutido — e esse hidden que vai pro POST e que o mad:model do mad-form/mad-detail-form coleta.

  • Foco: mostra o valor cru para editar (123.45 exibe 123,45).
  • Blur: reformata com separador de milhar pt-BR fixo (. milhar, , decimal) e decimals casas.
  • min/max: se informados, fazem clamp do valor no blur — nao sao os atributos HTML min/max (o input e type="text", nao type="number").

Props

Prop Tipo Default Descricao
name string '' Nome do campo (obrigatorio)
label string '' Label
width string '' Largura fixa do campo (CSS)
max-width string '' Largura maxima do campo (CSS)
prefix string '' Addon esquerdo
suffix string '' Addon direito
placeholder string '0,00' Placeholder
decimals int 2 Casas decimais
min string '' Valor minimo (clamp no blur)
max string '' Valor maximo (clamp no blur)
hint string '' Texto de ajuda
error string '' Mensagem de erro
required bool false Campo obrigatorio
disabled bool false Campo desabilitado
readonly bool false Campo somente leitura
align string '' Alinhamento do valor digitado: left (padrao), center ou right (comum em valores)
attrs string '' Atributos HTML extras (aplicados no input visivel)

Exemplos

{{-- Decimal padrao 2 casas --}}
<mad-numeric-field name="valor_unitario" label="Valor unitario" prefix="R$" decimals="2" required />

{{-- 4 casas decimais (cotacao, fator) --}}
<mad-numeric-field name="cotacao" label="Cotacao" decimals="4" min="0" />

{{-- Com sufixo --}}
<mad-numeric-field name="peso" label="Peso" suffix="kg" decimals="3" />

{{-- Largura fixa --}}
<mad-numeric-field name="fator" label="Fator" width="160px" decimals="4" />

No PHP, o valor chega como float cru (ex: 123.45), pronto pra atribuir ao model e save().

Quando usar numeric-field vs number-field vs money-field

Preciso... Usar
Decimal formatado pt-BR, nao-monetario (cotacao, fator, peso, medida) <mad-numeric-field>
Quantidade/decimal sem mascara (ordem, percentual com step) <mad-number-field>
Valor monetario (preco, total, desconto) <mad-money-field>

Ver number-field.md e money-field.md.

NUNCA fazer

{{-- ERRADO: numeric-field para inteiros simples — overhead de Alpine sem ganho --}}
<mad-numeric-field name="ordem" label="Ordem" decimals="0" />

{{-- CERTO --}}
<mad-number-field name="ordem" label="Ordem" min="1" step="1" />

{{-- ERRADO: numeric-field para dinheiro — sem reverse-mask, sem prefix R$ padrao --}}
<mad-numeric-field name="preco" label="Preco" decimals="2" />

{{-- CERTO --}}
<mad-money-field name="preco" label="Preco" />

{{-- ERRADO: setar valor via JS direto no input visivel — Alpine sobrescreve no proximo render --}}
document.querySelector('[name=cotacao]').value = '123.45';

{{-- CERTO: usar form->set() no PHP --}}
$this->form->set('cotacao', 123.45);