mad-input-field

Campo de input de texto generico. Substitui <input> nativo. Integra com MadForm via mad:model automatico.

Props#

Prop	Tipo	Default	Descricao
name	string	''	Nome do campo (obrigatorio)
label	string	''	Label do campo
value	string	''	Valor inicial. Perde para o valor do registro quando o MadRenderContext esta populado (registro > prop value)
type	string	'text'	text, password, email, tel, url, hidden. Evite number/date/time/datetime-local/file — use o componente especifico (mad-number-field, mad-date-field, etc)
placeholder	string	''	Placeholder do input
hint	string	''	Texto de ajuda abaixo do campo
error	string	''	Mensagem de erro (aplica estilo de erro)
required	bool	false	Campo obrigatorio (mostra asterisco)
disabled	bool	false	Campo desabilitado
readonly	bool	false	Somente leitura
maxlength	string	''	Tamanho maximo
min	string	''	Valor minimo (number)
max	string	''	Valor maximo (number)
attrs	string	''	Atributos HTML extras (nao ha prop id — o id do <input> e sempre auto-gerado mad_{name}_{rand})
mask	string	''	Mascara de digitacao — alias (cpf, cnpj, cpfcnpj, cep, phone/tel/telefone/celular, date, time, datetime, placa, rg) ou pattern literal (9 digito, A letra uppercase, * alfanumerico, demais caracteres = literal)
icon	string	''	Icone Lucide dentro do input
iconColor	string	''	Cor do icone (qualquer valor CSS — hex, var, named)
iconSide	string	'left'	left ou right
forceCase	string	''	Auto-transform on input: upper, lower, title
stripMask	bool	false	Remove caracteres nao alfanumericos no getData() (so quando mask esta setado). Backend recebe valor cru
width	string	''	Largura inline do input/wrapper (100px, 50%, 100%)
maxWidth	string	''	Largura maxima inline
togglePassword	bool	false	Adiciona botao olho. Inicia como type=password independente do type passado, click alterna text ↔ password

action, trigger, target e autocompleteSource nao existem como props deste componente (nao estao no @props([...]) de input-field.blade.php) — nao use, nao tem efeito.

Mascara de digitacao (mask)#

Aplica formatacao client-side conforme o usuario digita. Cursor e mantido. maxlength e setado automaticamente quando o alias tem tamanho fixo (so se voce nao passar maxlength manualmente).

Alias	maxlength automatico
cpf	14
cnpj	18
cpfcnpj	18
cep	9
phone / tel / telefone / celular	15
date	10
time	5
datetime	16
placa	8
rg	12

{{-- Aliases prontos --}}
<mad-input-field name="cpf" label="CPF" mask="cpf" />
<mad-input-field name="cnpj" label="CNPJ" mask="cnpj" />
<mad-input-field name="documento" label="CPF/CNPJ" mask="cpfcnpj" />  {{-- dinamico --}}
<mad-input-field name="cep" label="CEP" mask="cep" />
<mad-input-field name="fone" label="Telefone" mask="phone" />          {{-- dinamico fixo/celular --}}
<mad-input-field name="dt" label="Data" mask="date" />
<mad-input-field name="hr" label="Hora" mask="time" />
<mad-input-field name="placa" label="Placa" mask="placa" />
<mad-input-field name="rg" label="RG" mask="rg" />

{{-- Pattern literal --}}
<mad-input-field name="iata" label="Codigo IATA" mask="AAA" />
<mad-input-field name="serial" label="Serial" mask="999-AAA-9999" />
<mad-input-field name="custom" label="Custom" mask="**.**.**" />

Aliases dinamicos#

Alias	Comportamento
cpfcnpj	Ate 11 digitos = CPF (999.999.999-99). 12+ digitos = CNPJ (99.999.999/9999-99) — switch automatico ao digitar
phone (alias: tel/telefone/celular)	Ate 10 digitos = (99) 9999-9999. 11 digitos = (99) 99999-9999

Tokens do pattern literal#

Token	Aceita
9	Digito 0-9
A	Letra A-Z (auto uppercase)
*	Qualquer alfanumerico
Outros	Literal (injetado automaticamente — usuario nao precisa digitar)

Valor enviado no form#

O mad:model coleta o valor com mascara (123.456.789-00). Duas opcoes para receber valor cru no backend:

Opcao 1 (recomendada): strip-mask — backend faz strip automaticamente no getData():

<mad-input-field name="cpf" label="CPF" mask="cpf" strip-mask />

$data = $this->form->getData();
// $data->cpf === '12345678901' (so digitos)

Opcao 2: mutator no model — quando voce quer manter o valor mascarado no getData() mas cru no banco (accessor/mutator do Eloquent):

use Illuminate\Database\Eloquent\Casts\Attribute;

protected function cpf(): Attribute
{
    return Attribute::make(
        set: fn (string $value) => preg_replace('/\D/', '', $value),
    );
}

Icone, cor e lado#

<mad-input-field name="busca" label="Buscar" icon="search" />
<mad-input-field name="email" label="Email" type="email" icon="mail" icon-color="#3b82f6" />
<mad-input-field name="codigo" label="Codigo" icon="hash" icon-side="right" />

Forcar digitacao (force-case)#

Valor	Efeito
upper	TUDO MAIUSCULO
lower	tudo minusculo
title	Primeira Letra De Cada Palavra

<mad-input-field name="codigo" label="Codigo" force-case="upper" />
<mad-input-field name="email" label="Email" force-case="lower" />
<mad-input-field name="nome" label="Nome" force-case="title" />

Funciona junto com mask — mascara aplica primeiro, force-case depois.

Toggle de visibilidade (esconder/mostrar)#

Quando toggle-password e true, o campo inicia como type=password e ganha botao olho que alterna entre password ↔ text. Util para campos sensiveis (chave de API, token, senha custom):

<mad-input-field name="api_key" label="Chave de API" toggle-password />
<mad-input-field name="token" label="Token JWT" toggle-password mask="*" />

Largura#

<mad-input-field name="cep" label="CEP" mask="cep" width="140px" />
<mad-input-field name="codigo" label="Codigo" width="50%" max-width="200px" />

Combinando tudo#

<mad-input-field
    name="cpf"
    label="CPF"
    mask="cpf"
    strip-mask
    icon="id-card"
    icon-color="#6366f1"
    width="200px"
    placeholder="000.000.000-00" />

<mad-input-field
    name="placa"
    label="Placa do veiculo"
    mask="placa"
    force-case="upper"
    icon="car"
    width="160px" />

Uso basico#

<mad-input-field name="nome" label="Nome" required />
<mad-input-field name="email" label="Email" type="email" />
<mad-input-field name="senha" label="Senha" type="password" required />

Com placeholder e hint#

<mad-input-field name="codigo" label="Codigo"
    placeholder="Ex: ABC-123" hint="Codigo gerado automaticamente" />

Disabled / readonly#

{{-- Disabled: nao envia no form --}}
<mad-input-field name="pessoa_nome" label="Nome" disabled />

{{-- Readonly: envia no form mas nao edita --}}
<mad-input-field name="codigo" label="Codigo" readonly />

Numero com min/max#

<mad-input-field name="trash_retention_days" label="Dias na lixeira"
    type="number" min="1" max="365" />

Hidden#

<mad-input-field name="tag_ids" type="hidden" />

Com i18n (label traduzido)#

{{-- Sempre :label (bind PHP) com __(), nunca {{ __() }} --}}
<mad-input-field name="name" :label="__('ged.folder_name')" required />
<mad-input-field name="title" :label="__('ged.title')" required />

Dentro de mad-form#

<mad-form submit="onSave">
    <mad-form-grid :cols="2">
        <mad-input-field name="nome" label="Nome" required />
        <mad-input-field name="email" label="Email" type="email" />
    </mad-form-grid>
    <mad-btn type="submit" variant="primary" icon="save">Salvar</mad-btn>
</mad-form>

Auto-bind via PHP (form->set)#

public function onPessoaChange(int $id): void
{
    $p = Pessoa::findOrFail($id);
    $this->form->set('pessoa_nome', $p->nome);
    $this->form->set('pessoa_email', $p->email);
}

<mad-input-field name="pessoa_nome" label="Nome" disabled />
<mad-input-field name="pessoa_email" label="Email" disabled />

NUNCA fazer#

{{-- ERRADO: input nativo --}}
<input type="text" name="nome" class="form-control" />

{{-- CERTO --}}
<mad-input-field name="nome" label="Nome" />

{{-- ERRADO: type=date / time / datetime-local / number / file --}}
<mad-input-field name="dt" type="date" />
<mad-input-field name="hr" type="time" />
<mad-input-field name="qtd" type="number" />
<mad-input-field name="arquivo" type="file" />

{{-- CERTO: usar componentes especificos --}}
<mad-date-field name="dt" label="Data" />
<mad-time-field name="hr" label="Hora" />
<mad-number-field name="qtd" label="Quantidade" />
<mad-file-field name="arquivo" label="Arquivo" storage="disk" folder="uploads" />

{{-- ERRADO: {{ __() }} em atributo --}}
<mad-input-field name="nome" label="{{ __('app.name') }}" />

{{-- CERTO: :label com bind PHP --}}
<mad-input-field name="nome" :label="__('app.name')" />

{{-- ERRADO: para valores monetarios/numericos com mascara --}}
<mad-input-field name="valor" label="Valor" />

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