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

mad-spinner-field

Número com botões +/-.

Campo de formulario com input number e botoes incrementar/decrementar. Substitui <mad-input-field type="number"> quando o usuario precisa ajustar valores em passos pequenos (quantidade, idade, repeticoes).

Props

Prop Tipo Default Descricao
name string '' Nome do campo (obrigatorio)
label string '' Label do campo
value string '' Valor inicial
min number '' Valor minimo (desabilita botao -)
max number '' Valor maximo (desabilita botao +)
step number 1 Incremento por clique
hint string '' Texto de ajuda
error string '' Mensagem de erro
required bool false Campo obrigatorio
disabled bool false Campo desabilitado
readonly bool false Somente leitura
attrs string '' Atributos HTML extras
width string '' Largura do .mad-field (numero puro = px)
max-width string '' Largura maxima do .mad-field

O valor exibido segue a regra MadFieldValue: registro do MadRenderContext vence a prop value (que e so o default do dev). Os botoes +/- respeitam min/max (ficam desabilitados nos extremos) e andam de step em step.

Uso basico

<mad-spinner-field name="quantidade" label="Quantidade" :value="1" :min="1" />

Com limites e step

<mad-spinner-field name="qtd" label="Qtd. caixas"
    :value="0" :min="0" :max="100" :step="1" />

Step decimal

<mad-spinner-field name="peso" label="Peso (kg)"
    :value="0.5" :min="0" :step="0.1" />

Dentro de formulario

<mad-form submit="onSave">
    <mad-form-grid :cols="2">
        <mad-spinner-field name="qtd" label="Quantidade" :value="1" :min="1" :max="999" />
        <mad-numeric-field name="valor" label="Valor unitario" prefix="R$" />
    </mad-form-grid>
    <mad-btn type="submit" variant="primary" icon="save">Salvar</mad-btn>
</mad-form>

Quando usar spinner-field vs outros campos numericos

Preciso... Usar
Campo numerico com +/- (qtd, idade, repeticoes) <mad-spinner-field>
Campo monetario / decimal formatado pt-BR <mad-numeric-field> (NAO spinner-field)
Slider numerico <mad-range-field>
Input number nativo simples (sem +/-) <mad-number-field>

NUNCA fazer

{{-- ERRADO: input number puro pra quantidade --}}
<mad-input-field name="qtd" label="Quantidade" type="number" />

{{-- CERTO: spinner-field tem botoes +/- --}}
<mad-spinner-field name="qtd" label="Quantidade" :value="1" :min="1" />

{{-- ERRADO: usar spinner-field para valor monetario --}}
<mad-spinner-field name="valor" label="Preco" :step="0.01" />

{{-- CERTO --}}
<mad-numeric-field name="valor" label="Preco" prefix="R$" />

{{-- ERRADO: montar +/- manualmente com JS --}}
<input type="number" id="qtd" name="qtd">
<button onclick="document.getElementById('qtd').stepUp()">+</button>
<button onclick="document.getElementById('qtd').stepDown()">-</button>

{{-- CERTO --}}
<mad-spinner-field name="qtd" label="Quantidade" :value="1" :min="0" />