Estrutura de formulário
mad-form
mad-form-section
mad-form-grid
mad-form-grid-item
mad-form-actions
mad-form-stack
mad-field
Seção + grid
mad-form-section agrupa campos com título e ícone; mad-form-grid distribui em colunas.
resources/views/tutor/examples/estrutura-form-basico/secao-grid.blade.php
<mad-form-section title="Dados do cliente" icon="user">
<mad-form-grid :cols="2">
<mad-input-field name="nome_sg" label="Nome" placeholder="Ex: Ana Souza" icon="user" />
<mad-input-field name="email_sg" label="E-mail" type="email" placeholder="ana@exemplo.com" icon="mail" />
</mad-form-grid>
</mad-form-section>
Grid item com span
mad-form-grid-item faz um campo ocupar mais de uma coluna dentro do mesmo grid.
resources/views/tutor/examples/estrutura-form-basico/grid-item-span.blade.php
<mad-form-section title="Produto" icon="package">
<mad-form-grid :cols="3">
<mad-form-grid-item :span="2">
<mad-input-field name="nome_produto" label="Nome do produto" placeholder="Ex: Cadeira gamer" />
</mad-form-grid-item>
<mad-input-field name="codigo_produto" label="Código" placeholder="SKU-001" />
</mad-form-grid>
</mad-form-section>
Stack (empilhado)
mad-form-stack empilha campos 100% da largura — alternativa semântica ao grid de 1 coluna.
resources/views/tutor/examples/estrutura-form-basico/stack.blade.php
<mad-form-section title="Observações" icon="file-text">
<mad-form-stack>
<mad-input-field name="titulo_stack" label="Título" placeholder="Resumo em poucas palavras" />
<mad-textarea-field name="obs_stack" label="Descrição" :rows="3" placeholder="Detalhe aqui..." />
</mad-form-stack>
</mad-form-section>
Ações do formulário
mad-form-actions agrupa os botões no rodapé, com alinhamento configurável.
resources/views/tutor/examples/estrutura-form-basico/actions.blade.php
<mad-form-section title="Confirmação" icon="check-circle">
<mad-form-grid :cols="1">
<mad-input-field name="motivo_acao" label="Motivo" placeholder="Explique o motivo..." />
</mad-form-grid>
</mad-form-section>
<mad-form-actions align="right">
<mad-btn variant="ghost" icon="x">Cancelar</mad-btn>
<mad-btn type="submit" variant="primary" icon="save">Salvar</mad-btn>
</mad-form-actions>
Wrapper genérico (mad-field)
mad-field aplica o mesmo label + hint dos campos mad-* em volta de HTML livre.
Plano Profissional — renovação em 12/09/2026
mad-field aplica o mesmo label + hint dos campos mad-* em volta de QUALQUER HTML — aqui, um bloco de leitura, sem input nenhum.
resources/views/tutor/examples/estrutura-form-basico/field-wrapper.blade.php
<mad-form-section title="Resumo do plano" icon="info">
<mad-field label="Plano atual"
hint="mad-field aplica o mesmo label + hint dos campos mad-* em volta de QUALQUER HTML — aqui, um bloco de leitura, sem input nenhum.">
<div style="padding:10px 12px;border:1px solid var(--mad-border);border-radius:8px;background:var(--mad-bg-subtle);">
<strong>Plano Profissional</strong> — renovação em 12/09/2026
</div>
</mad-field>
</mad-form-section>
Formulário completo
Seções + grid + stack + actions + required, com submit real — dispara TutorEstruturaFormBasico::onSubmitCadastro.
resources/views/tutor/examples/estrutura-form-basico/cadastro-completo.blade.php
<mad-form submit="onSubmitCadastro">
<mad-form-section title="Dados do cliente" icon="user">
<mad-form-grid :cols="2">
<mad-form-grid-item :span="2">
<mad-input-field name="nome_completo" label="Nome completo" required icon="user"
placeholder="Ex: Mariana Costa" />
</mad-form-grid-item>
<mad-input-field name="email_completo" label="E-mail" type="email" required icon="mail" />
<mad-input-field name="telefone_completo" label="Telefone" mask="celular" />
</mad-form-grid>
</mad-form-section>
<mad-separator />
<mad-form-section title="Endereço" icon="map-pin">
<mad-form-stack>
<mad-textarea-field name="endereco_completo" label="Endereço completo" :rows="2"
placeholder="Rua, número, bairro, cidade..." />
</mad-form-stack>
</mad-form-section>
<mad-form-actions align="right">
<mad-btn variant="ghost" icon="x">Limpar</mad-btn>
<mad-btn type="submit" variant="primary" icon="save">Enviar cadastro</mad-btn>
</mad-form-actions>
</mad-form>
app/control/Tutor/TutorEstruturaFormBasico.php
/**
* Submit do exemplo "Formulário completo" — lê $this->form->getData() e
* devolve um toast com o resumo dos campos preenchidos, provando o ciclo
* inteiro de validação (required) + submit real.
*/
public function onSubmitCadastro(): MadResponse
{
$data = $this->form->getData();
$preenchidos = [];
foreach ((array) $data as $campo => $valor) {
$valor = trim((string) $valor);
if ($valor !== '') {
$preenchidos[] = "{$campo}={$valor}";
}
}
$resumo = $preenchidos !== [] ? implode(' | ', $preenchidos) : 'nenhum campo preenchido';
return (new MadResponse())
->toast("Cadastro recebido: {$resumo}", 'success', 'onSubmitCadastro');
}
Código-fonte completo da página
app/control/Tutor/TutorEstruturaFormBasico.php
<?php
namespace App\Control\Tutor;
use App\Support\Tutor\TutorPage;
use Mad\Form\MadForm;
use Mad\Http\MadResponse;
/**
* TutorEstruturaFormBasico — página "Formulário básico" do MAD Lab.
*
* Cobre os blocos de estrutura que compõem QUALQUER form MAD: mad-form,
* mad-form-section, mad-form-grid (+ mad-form-grid-item p/ span), mad-form-stack,
* mad-form-actions e o wrapper genérico mad-field. O último exemplo fecha o
* ciclo com um submit real (onSubmitCadastro) que devolve um toast com os
* dados recebidos — mesmo contrato do gabarito TutorFormsTexto.
*/
class TutorEstruturaFormBasico extends TutorPage
{
protected string $catalogKey = 'estrutura_form_basico';
public MadForm $form;
public function mount(array $params = []): void
{
$this->form = new MadForm('tutor_estrutura_form_basico');
}
/**
* Submit do exemplo "Formulário completo" — lê $this->form->getData() e
* devolve um toast com o resumo dos campos preenchidos, provando o ciclo
* inteiro de validação (required) + submit real.
*/
public function onSubmitCadastro(): MadResponse
{
$data = $this->form->getData();
$preenchidos = [];
foreach ((array) $data as $campo => $valor) {
$valor = trim((string) $valor);
if ($valor !== '') {
$preenchidos[] = "{$campo}={$valor}";
}
}
$resumo = $preenchidos !== [] ? implode(' | ', $preenchidos) : 'nenhum campo preenchido';
return (new MadResponse())
->toast("Cadastro recebido: {$resumo}", 'success', 'onSubmitCadastro');
}
}
resources/views/tutor/estrutura/form-basico.blade.php
<x-tutor-page page="estrutura_form_basico">
<x-tutor-demo demo="tutor.examples.estrutura-form-basico.secao-grid"
title="Seção + grid" desc="mad-form-section agrupa campos com título e ícone; mad-form-grid distribui em colunas." />
<x-tutor-demo demo="tutor.examples.estrutura-form-basico.grid-item-span"
title="Grid item com span" desc="mad-form-grid-item faz um campo ocupar mais de uma coluna dentro do mesmo grid." />
<x-tutor-demo demo="tutor.examples.estrutura-form-basico.stack"
title="Stack (empilhado)" desc="mad-form-stack empilha campos 100% da largura — alternativa semântica ao grid de 1 coluna." />
<x-tutor-demo demo="tutor.examples.estrutura-form-basico.actions"
title="Ações do formulário" desc="mad-form-actions agrupa os botões no rodapé, com alinhamento configurável." />
<x-tutor-demo demo="tutor.examples.estrutura-form-basico.field-wrapper"
title="Wrapper genérico (mad-field)" desc="mad-field aplica o mesmo label + hint dos campos mad-* em volta de HTML livre." />
<x-tutor-demo demo="tutor.examples.estrutura-form-basico.cadastro-completo"
title="Formulário completo" desc="Seções + grid + stack + actions + required, com submit real — dispara TutorEstruturaFormBasico::onSubmitCadastro."
php="TutorEstruturaFormBasico::onSubmitCadastro" />
</x-tutor-page>