Multiselect Categorizado

Versão: 1.0.0 Data: 13/03/2026

---

Visão Geral

O componente Multiselect Categorizado oferece uma interface de seleção múltipla com agrupamento por categoria. Os itens são organizados em seções colapsáveis, facilitando a navegação em listas extensas. Utiliza o prefixo .ms- para suas classes. Requer o CSS de checkbox (checkbox.css) e pode sincronizar com o componente Ações Quantidade.

---

Estrutura HTML

<div class="multiselect-categorizado" id="meuMultiselect">
    <div class="ms-header">
        <span class="ms-header-title">Selecione os itens</span>
        <input type="text" class="ms-search" placeholder="Pesquisar...">
    </div>

    <div class="ms-body">
        <!-- Categoria -->
        <div class="ms-category">
            <div class="ms-category-header">
                <input type="checkbox" class="ms-category-check">
                <span>Nome da Categoria</span>
            </div>
            <div class="ms-category-items">
                <label class="ms-item">
                    <input type="checkbox" value="1">
                    <span>Item 1</span>
                </label>
                <label class="ms-item">
                    <input type="checkbox" value="2">
                    <span>Item 2</span>
                </label>
            </div>
        </div>
    </div>

    <div class="ms-footer">
        <span class="ms-count">0 selecionados</span>
    </div>
</div>

---

Funcionalidades

1. Agrupamento por categoria: Itens organizados em seções colapsáveis com cabeçalho próprio.
2. Seleção por categoria: Checkbox no cabeçalho seleciona/desmarca todos os itens da categoria.
3. Pesquisa: Campo de busca filtra itens e categorias em tempo real.
4. Sincronização: Integra-se com o componente Ações Quantidade para exibir e quantificar os itens selecionados.
5. Contagem: Rodapé exibe a quantidade total de itens selecionados.

---

JavaScript

$('#meuMultiselect').multiselectCategorizado({
    acoesQuantidade: '#minhasAcoesQuantidade',
    onChange: function (selecionados) {
        console.log('Itens selecionados:', selecionados);
    }
});

---

Dark Mode

Suporte completo ao modo escuro, ajustando cores de fundo, bordas das categorias, checkboxes e campo de pesquisa.

---

Mantido por: Equipe Ipeweb