Docs›Componentes (Admin)›mad-multi-entry-field
Componentes (Admin)

mad-multi-entry-field

Tags/chips livres ou de options fixas.

Campo de entrada multipla tipo tags/chips. Suporta dois modos: criacao livre (usuario digita e pressiona Enter) e selecao a partir de opcoes fixas. Valor enviado como name[].

Props

Prop Tipo Default Descricao
name string '' Nome do campo (obrigatorio, enviado como name[])
label string '' Label do campo
width string '' Largura inline do wrapper (100px, 50%)
max-width string '' Largura maxima inline
options array [] Mapa valor => label. Vazio = modo criacao livre
items array [] Alias de options (nome gravado pelo editor visual). So e usado quando options esta vazio
value array/string [] Valores selecionados (array ou string separada por virgula)
max int 0 Maximo de itens (0 = ilimitado)
placeholder string 'Digite e pressione Enter...' Texto do input
hint string '' Texto de ajuda
error string '' Mensagem de erro
required bool false Campo obrigatorio
disabled bool false Campo desabilitado
attrs string '' Atributos HTML extras

Tags livres (sem opcoes — criacao pelo usuario)

Quando options esta vazio, o usuario digita livremente e pressiona Enter para criar cada tag.

<mad-multi-entry-field name="tags" label="Tags"
    placeholder="Digite e pressione Enter..." />

Tags com opcoes fixas (selecao)

Quando options e informado, o usuario so pode escolher entre as opcoes do mapa.

@php
    $modulos = ['erp' => 'ERP', 'crm' => 'CRM', 'fin' => 'Financeiro'];
@endphp
<mad-multi-entry-field name="modulos" label="Modulos"
    :options="$modulos" :value="['erp']"
    placeholder="Selecione modulos..." />

Limite maximo de itens

<mad-multi-entry-field name="tags" label="Tags (max 5)"
    max="5" placeholder="Ate 5 tags..." />

Pre-preenchido a partir do banco

{{-- $produto->tags = "promo,novo,destaque" (string CSV) --}}
<mad-multi-entry-field name="tags" label="Tags"
    :value="$produto->tags" />

{{-- ou array --}}
<mad-multi-entry-field name="tags" label="Tags"
    :value="['promo', 'novo']" />

Validacao (required + erro)

<mad-multi-entry-field name="categorias" label="Categorias"
    :options="$categorias" required
    :error="$errors['categorias'] ?? ''" />

use Illuminate\Support\Facades\DB;

public function onSave(): MadResponse
{
    try {
        $data = $this->form->getData();
        $this->form->validate(Produto::rules($this->registroId));

        DB::connection('business')->transaction(function () use ($data) {
            $produto = Produto::findOrNew($this->registroId);
            $this->form->fillRecord($produto);
            // $data->tags vem como array de strings
            $produto->tags = implode(',', (array) $data->tags);
            $produto->save();
            $this->registroId = (int) $produto->id;
        });

        return (new MadResponse())->toast('Salvo!', 'success')->closeDrawer();
    } catch (MadValidationException $e) {
        return $e->asModal();
    } catch (\Throwable $e) {
        return MadMessage::error('Erro', $e->getMessage());
    }
}

Dentro de form-grid

<mad-form submit="onSave">
    <mad-form-grid :cols="2">
        <mad-multi-entry-field name="tags" label="Tags livres" />
        <mad-multi-entry-field name="modulos" label="Modulos" :options="$modulos" />
    </mad-form-grid>
    <mad-btn type="submit" variant="primary" icon="save">Salvar</mad-btn>
</mad-form>

Resumo de decisao

Preciso... Usar
Tags livres digitadas pelo usuario Sem options
Selecao de itens de uma lista fixa :options="$mapa"
Limitar quantidade max="N"
Pre-selecionar itens :value="['a','b']" ou string CSV

NUNCA fazer

{{-- ERRADO: usar input text com JS manual para tags --}}
<input type="text" id="tags" />
<script>/* logica de tags manual */</script>

{{-- CERTO --}}
<mad-multi-entry-field name="tags" label="Tags" />

{{-- ERRADO: usar mad-select-field multiple para tags livres --}}
<mad-select-field name="tags" label="Tags" multiple />

{{-- CERTO: select multiple nao permite criar opcoes novas --}}
<mad-multi-entry-field name="tags" label="Tags" />

{{-- ERRADO: passar options e esperar criacao livre --}}
{{-- Com options, o usuario so escolhe da lista, nao cria novos --}}
<mad-multi-entry-field name="tags" :options="$opts" />
{{-- usuario nao consegue digitar tags fora de $opts --}}

{{-- CERTO: omitir options para criacao livre --}}
<mad-multi-entry-field name="tags" />