MAD Lab
/
Tutor > Campos de formulário > Números

Números

Campos de formulário

mad-number-field mad-numeric-field mad-money-field mad-spinner-field mad-range-field
Numero inteiro

mad-number-field pra quantidades inteiras — min + step=1 evitam valores invalidos.

Numero inteiro simples: min=1 e step=1 evitam quantidade zero ou fracionada.

resources/views/tutor/examples/forms-numeros/basico.blade.php
<mad-number-field name="qtd_basico" label="Quantidade" :min="1" step="1" placeholder="1"
    hint="Numero inteiro simples: min=1 e step=1 evitam quantidade zero ou fracionada." />
Decimal sem mascara

mad-number-field com step fracionario — peso, fator, medida (sem formatacao pt-BR).

kg

mad-number-field tambem serve pra decimal sem mascara (peso, fator de conversao) — o step define as casas decimais aceitas.

resources/views/tutor/examples/forms-numeros/decimal.blade.php
<mad-number-field name="peso_kg" label="Peso" :min="0" step="0.001" suffix="kg"
    hint="mad-number-field tambem serve pra decimal sem mascara (peso, fator de conversao) — o step define as casas decimais aceitas." />
Decimal formatado (pt-BR)

mad-numeric-field com milhar e casas decimais configuraveis — cotacoes, indices.

US$

mad-numeric-field formata em pt-BR (milhar com ponto, decimal com virgula) enquanto o usuario digita.

resources/views/tutor/examples/forms-numeros/numeric-formatado.blade.php
<mad-numeric-field name="cotacao_usd" label="Cotacao (USD)" :decimals="4" prefix="US$ "
    hint="mad-numeric-field formata em pt-BR (milhar com ponto, decimal com virgula) enquanto o usuario digita." />
Moeda (R$)

mad-money-field com prefixo R$ e a variante allow-negative pra estornos/ajustes.

R$

Prefixo R$ e separadores pt-BR por padrao — o PHP recebe o valor cru (123.45), sem formatacao.

R$

allow-negative libera valores negativos — util pra estornos e ajustes de caixa.

resources/views/tutor/examples/forms-numeros/moeda.blade.php
<mad-form-grid :cols="2">
    <mad-money-field name="preco_venda" label="Preco de venda"
        hint="Prefixo R$ e separadores pt-BR por padrao — o PHP recebe o valor cru (123.45), sem formatacao." />
    <mad-money-field name="ajuste_caixa" label="Ajuste de caixa" allow-negative
        hint="allow-negative libera valores negativos — util pra estornos e ajustes de caixa." />
</mad-form-grid>
Spinner +/-

mad-spinner-field com botoes de incremento/decremento ao lado do valor.

Botoes +/- ao lado do valor — ideal pra quantidades pequenas em carrinho/PDV.

resources/views/tutor/examples/forms-numeros/spinner.blade.php
<mad-spinner-field name="qtd_spinner" label="Quantidade" :value="1" :min="1" :max="20"
    hint="Botoes +/- ao lado do valor — ideal pra quantidades pequenas em carrinho/PDV." />
Slider (range)

mad-range-field pra percentuais e ajustes visuais rapidos.

0% 100%

Slider visual — bom pra percentuais e configuracoes (desconto, volume, opacidade).

resources/views/tutor/examples/forms-numeros/range.blade.php
<mad-range-field name="progresso" label="Progresso" :value="40" :min="0" :max="100" suffix="%"
    hint="Slider visual — bom pra percentuais e configuracoes (desconto, volume, opacidade)." />
Acao wire

mad-form com submit real — calcula o total no servidor via TutorFormsNumeros::onSubmitDemo.

R$

resources/views/tutor/examples/forms-numeros/wire-submit.blade.php
<mad-form submit="onSubmitDemo">
    <mad-form-grid :cols="2">
        <mad-number-field name="quantidade_wire" label="Quantidade" :min="1" step="1" required />
        <mad-money-field name="valor_unit_wire" label="Valor unitario" required />
    </mad-form-grid>
    <mad-form-actions align="right">
        <mad-btn type="submit" variant="primary" icon="calculator">Calcular (onSubmitDemo)</mad-btn>
    </mad-form-actions>
</mad-form>
app/control/Tutor/TutorFormsNumeros.php
/**
 * Submit do exemplo "Ação wire" — lê quantidade + valor unitário e
 * calcula o total no servidor (prova que number-field/money-field chegam
 * como número cru no PHP, sem máscara).
 */
public function onSubmitDemo(): MadResponse
{
    $data = $this->form->getData();

    $quantidade = (float) ($data->quantidade_wire ?? 0);
    $valorUnit  = (float) ($data->valor_unit_wire ?? 0);
    $total      = $quantidade * $valorUnit;

    $msg = sprintf(
        'Total calculado: %s x R$ %s = R$ %s',
        rtrim(rtrim(number_format($quantidade, 3, ',', '.'), '0'), ','),
        number_format($valorUnit, 2, ',', '.'),
        number_format($total, 2, ',', '.')
    );

    return (new MadResponse())->toast($msg, 'success', 'onSubmitDemo');
}
Código-fonte completo da página
app/control/Tutor/TutorFormsNumeros.php
<?php

namespace App\Control\Tutor;

use App\Support\Tutor\TutorPage;
use Mad\Form\MadForm;
use Mad\Http\MadResponse;

/**
 * TutorFormsNumeros — página "Números" do catálogo (mad-number-field,
 * mad-numeric-field, mad-money-field, mad-spinner-field, mad-range-field).
 */
class TutorFormsNumeros extends TutorPage
{
    protected string $catalogKey = 'forms_numeros';

    public MadForm $form;

    public function mount(array $params = []): void
    {
        $this->form = new MadForm('tutor_forms_numeros');
    }

    /**
     * Submit do exemplo "Ação wire" — lê quantidade + valor unitário e
     * calcula o total no servidor (prova que number-field/money-field chegam
     * como número cru no PHP, sem máscara).
     */
    public function onSubmitDemo(): MadResponse
    {
        $data = $this->form->getData();

        $quantidade = (float) ($data->quantidade_wire ?? 0);
        $valorUnit  = (float) ($data->valor_unit_wire ?? 0);
        $total      = $quantidade * $valorUnit;

        $msg = sprintf(
            'Total calculado: %s x R$ %s = R$ %s',
            rtrim(rtrim(number_format($quantidade, 3, ',', '.'), '0'), ','),
            number_format($valorUnit, 2, ',', '.'),
            number_format($total, 2, ',', '.')
        );

        return (new MadResponse())->toast($msg, 'success', 'onSubmitDemo');
    }
}
resources/views/tutor/forms/numeros.blade.php
<x-tutor-page page="forms_numeros">
    <x-tutor-demo demo="tutor.examples.forms-numeros.basico"
        title="Numero inteiro" desc="mad-number-field pra quantidades inteiras — min + step=1 evitam valores invalidos." />

    <x-tutor-demo demo="tutor.examples.forms-numeros.decimal"
        title="Decimal sem mascara" desc="mad-number-field com step fracionario — peso, fator, medida (sem formatacao pt-BR)." />

    <x-tutor-demo demo="tutor.examples.forms-numeros.numeric-formatado"
        title="Decimal formatado (pt-BR)" desc="mad-numeric-field com milhar e casas decimais configuraveis — cotacoes, indices." />

    <x-tutor-demo demo="tutor.examples.forms-numeros.moeda"
        title="Moeda (R$)" desc="mad-money-field com prefixo R$ e a variante allow-negative pra estornos/ajustes." />

    <x-tutor-demo demo="tutor.examples.forms-numeros.spinner"
        title="Spinner +/-" desc="mad-spinner-field com botoes de incremento/decremento ao lado do valor." />

    <x-tutor-demo demo="tutor.examples.forms-numeros.range"
        title="Slider (range)" desc="mad-range-field pra percentuais e ajustes visuais rapidos." />

    <x-tutor-demo demo="tutor.examples.forms-numeros.wire-submit"
        title="Acao wire" desc="mad-form com submit real — calcula o total no servidor via TutorFormsNumeros::onSubmitDemo."
        php="TutorFormsNumeros::onSubmitDemo" />
</x-tutor-page>