Campos de formulário
mad-input-field
mad-textarea-field
mad-password-field
mad-otp-field
mad-search-field
mad-display-field
Básico
mad-input-field com label, placeholder, ícone e hint.
Label, placeholder e ícone — o trio mais comum de um input de texto.
resources/views/tutor/examples/forms-texto/basico.blade.php
<mad-input-field name="nome_basico" label="Nome" placeholder="Digite seu nome"
icon="user" hint="Label, placeholder e ícone — o trio mais comum de um input de texto." />
Obrigatório + validação
required nativo do HTML5 combinado com máscara e force-case.
required habilita a validação HTML5 nativa do navegador
mask=placa + force-case=upper — validação e formatação junto com required
resources/views/tutor/examples/forms-texto/obrigatorio.blade.php
<mad-form-grid :cols="2">
<mad-input-field name="email_obrigatorio" label="E-mail" type="email" required
icon="mail" hint="required habilita a validação HTML5 nativa do navegador" />
<mad-input-field name="placa_obrigatoria" label="Placa" mask="placa" force-case="upper" required
hint="mask=placa + force-case=upper — validação e formatação junto com required" />
</mad-form-grid>
Textarea
mad-textarea-field com rows configurável.
rows controla a altura. Esta versão do mad-textarea-field não tem prop de contador de caracteres.
resources/views/tutor/examples/forms-texto/textarea.blade.php
<mad-textarea-field name="obs_textarea" label="Observação" :rows="4"
placeholder="Digite um texto mais longo..."
hint="rows controla a altura. Esta versão do mad-textarea-field não tem prop de contador de caracteres." />
Senha
mad-password-field com toggle de visibilidade e regras de força.
toggle-visibility (o olho) e strong-password (regras mínimas) — ambos opcionais.
resources/views/tutor/examples/forms-texto/password.blade.php
<mad-password-field name="senha_demo" label="Senha" toggle-visibility strong-password
autocomplete="new-password"
hint="toggle-visibility (o olho) e strong-password (regras mínimas) — ambos opcionais." />
OTP
mad-otp-field para código de verificação.
6 dígitos numéricos, auto-avança o foco e aceita colar o código inteiro.
resources/views/tutor/examples/forms-texto/otp.blade.php
<mad-otp-field name="codigo_otp" label="Código de verificação" :length="6"
hint="6 dígitos numéricos, auto-avança o foco e aceita colar o código inteiro." />
Display + busca
mad-display-field somente leitura e mad-search-field.
Valor (somente leitura)
—
Campo de busca simples, sem ligação a banco (veja mad-dbunique-search-field no grupo DB).
resources/views/tutor/examples/forms-texto/display-busca.blade.php
<mad-form-grid :cols="2">
<mad-display-field name="valor_exemplo" label="Valor (somente leitura)" format="money" default="1234.56" />
<mad-search-field name="busca_demo" label="Busca" placeholder="Pesquisar registros..."
hint="Campo de busca simples, sem ligação a banco (veja mad-dbunique-search-field no grupo DB)." />
</mad-form-grid>
Ação wire
mad-form com submit real — dispara TutorFormsTexto::onSubmitDemo.
resources/views/tutor/examples/forms-texto/wire-submit.blade.php
<mad-form submit="onSubmitDemo">
<mad-form-grid :cols="2">
<mad-input-field name="nome_wire" label="Nome" required icon="user" />
<mad-input-field name="email_wire" label="E-mail" type="email" icon="mail" />
</mad-form-grid>
<mad-form-actions align="right">
<mad-btn type="submit" variant="primary" icon="send">Enviar (onSubmitDemo)</mad-btn>
</mad-form-actions>
</mad-form>
app/control/Tutor/TutorFormsTexto.php
/**
* Submit do exemplo "Ação wire" — prova o ciclo completo: lê
* $this->form->getData() e devolve um toast com o payload recebido.
*/
public function onSubmitDemo(): 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("Form recebido: {$resumo}", 'success', 'onSubmitDemo');
}
Campo ligado a banco
mad-dbcombo-field lendo a fixture TutorDemoCliente (conexão business).
Options carregadas da fixture do MAD Lab (business.tutor_clientes, ~40 registros).
resources/views/tutor/examples/forms-texto/db-combo.blade.php
<mad-dbcombo-field name="cliente_demo" label="Cliente (fixture TutorDemoCliente)"
model="TutorDemoCliente" database="business"
display="nome" order-by="nome"
placeholder="Selecione um cliente..."
hint="Options carregadas da fixture do MAD Lab (business.tutor_clientes, ~40 registros)." />
Código-fonte completo da página
app/control/Tutor/TutorFormsTexto.php
<?php
namespace App\Control\Tutor;
use App\Support\Tutor\TutorPage;
use Mad\Form\MadForm;
use Mad\Http\MadResponse;
/**
* TutorFormsTexto — GABARITO das 54 páginas do catálogo (Onda 0).
*
* Referência de formato para os agentes da Onda 1: cada demo é UM
* <x-tutor-demo> (zero <pre> manual), um dos exemplos dispara uma ação wire
* real (onSubmitDemo) e outro usa um campo ligado a banco (fixture
* TutorDemoCliente) pra provar que as fixtures compartilhadas funcionam.
*/
class TutorFormsTexto extends TutorPage
{
protected string $catalogKey = 'forms_texto';
public MadForm $form;
public function mount(array $params = []): void
{
$this->form = new MadForm('tutor_forms_texto');
}
/**
* Submit do exemplo "Ação wire" — prova o ciclo completo: lê
* $this->form->getData() e devolve um toast com o payload recebido.
*/
public function onSubmitDemo(): 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("Form recebido: {$resumo}", 'success', 'onSubmitDemo');
}
}
resources/views/tutor/forms/texto.blade.php
<x-tutor-page page="forms_texto">
<x-tutor-demo demo="tutor.examples.forms-texto.basico"
title="Básico" desc="mad-input-field com label, placeholder, ícone e hint." />
<x-tutor-demo demo="tutor.examples.forms-texto.obrigatorio"
title="Obrigatório + validação" desc="required nativo do HTML5 combinado com máscara e force-case." />
<x-tutor-demo demo="tutor.examples.forms-texto.textarea"
title="Textarea" desc="mad-textarea-field com rows configurável." />
<x-tutor-demo demo="tutor.examples.forms-texto.password"
title="Senha" desc="mad-password-field com toggle de visibilidade e regras de força." />
<x-tutor-demo demo="tutor.examples.forms-texto.otp"
title="OTP" desc="mad-otp-field para código de verificação." />
<x-tutor-demo demo="tutor.examples.forms-texto.display-busca"
title="Display + busca" desc="mad-display-field somente leitura e mad-search-field." />
<x-tutor-demo demo="tutor.examples.forms-texto.wire-submit"
title="Ação wire" desc="mad-form com submit real — dispara TutorFormsTexto::onSubmitDemo."
php="TutorFormsTexto::onSubmitDemo" />
<x-tutor-demo demo="tutor.examples.forms-texto.db-combo"
title="Campo ligado a banco" desc="mad-dbcombo-field lendo a fixture TutorDemoCliente (conexão business)." />
</x-tutor-page>