mad-number-field — Componentes (Admin)

Campo numerico nativo HTML5 — renderiza um <input type="number"> puro, sem mascara e sem estado Alpine. O valor fica direto no input, com a UX padrao do browser (setinhas de incremento, scroll para alterar, validacao min/max/step nativa do HTML5).

Para decimal formatado em pt-BR (peso, cotacao, fator) use <mad-numeric-field>. Para valores monetarios (mascara reversa estilo calculadora) use <mad-money-field>.

Props

Prop	Tipo	Default	Descricao
name	string	''	Nome do campo (obrigatorio)
label	string	''	Label
width	string	''	Largura fixa do campo (CSS, ex: `120px`)
max-width	string	''	Largura maxima do campo (CSS)
prefix	string	''	Addon esquerdo (ex: `R$`, `%`)
suffix	string	''	Addon direito (ex: `kg`, `un`)
placeholder	string	''	Placeholder (sem default — vazio nao mostra nada)
min	string	''	Valor minimo (atributo HTML `min`)
max	string	''	Valor maximo (atributo HTML `max`)
step	string	''	Incremento (ex: `0.01`, `0.001`)
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

Binding automatico (mad:model implicito)

Quando name e informado e attrs nao contem mad:model nem data-mad-model, o componente injeta automaticamente value="..." (lido do contexto do MadWire) e mad:model="{name}" no input — nao e preciso declarar mad:model manualmente, basta informar name. Para customizar o binding (ex: handler de evento proprio), passe seu mad:model via attrs.

Validacao

O componente registra o campo no MadFormRegistry (label, required, min, max, step) para validacao do mad-form pai.

Exemplos

{{-- Quantidade inteira --}}
<mad-number-field name="quantidade" label="Quantidade" min="1" step="1" required />

{{-- Decimal com step fino --}}
<mad-number-field name="peso" label="Peso (kg)" suffix="kg" step="0.001" min="0" />

{{-- Percentual --}}
<mad-number-field name="percentual" label="Percentual" suffix="%" min="0" max="100" step="0.01" />

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

{{-- Largura fixa --}}
<mad-number-field name="qtd" label="Qtd" width="120px" min="0" step="1" />

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

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

Ver numeric-field.md e money-field.md.

NUNCA fazer

{{-- ERRADO: input nativo cru, fora do MadForm --}}
<input type="number" name="valor" step="0.01">

{{-- CERTO --}}
<mad-number-field name="valor" label="Valor" step="0.01" />

{{-- ERRADO: number-field para dinheiro — sem mascara, browser mostra setinhas, UX ruim --}}
<mad-number-field name="preco" label="Preco" prefix="R$" step="0.01" />

{{-- CERTO: money-field tem mascara reversa pt-BR --}}
<mad-money-field name="preco" label="Preco" />

{{-- ERRADO: input-field (texto livre) para valor numerico --}}
<mad-input-field name="quantidade" label="Quantidade" />

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

Props#

Binding automatico (mad:model implicito)#

Validacao#

Exemplos#

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