🏙️ Guia de Uso: Input City (Seleção de Municípios)

Design System SIDASP (Fork Gales)Versão: 1.0.0 Data: 09/01/2026

---

📑 Índice

• Visão Geral
• Estrutura HTML
• Funcionalidades
• JavaScript
• Dark Mode

---

🎯 Visão Geral

O componente Input City oferece uma interface rica para seleção de municípios brasileiros. Ele substitui selects longos por um dropdown com pesquisa, filtro por UF e exibição formatada.

---

🏗️ Estrutura HTML

<div class="input-city" id="meuInputCity">
    <!-- Trigger (Campo visível) -->
    <div class="input-city-trigger" tabindex="0">
        <div class="input-city-icon">
            <svg>...</svg> <!-- Ícone de mapa -->
        </div>
        <div class="input-city-text input-city-text--placeholder">
            Selecione o município...
        </div>
        <div class="input-city-chevron">
            <svg>...</svg> <!-- Ícone chevron -->
        </div>
        <button type="button" class="input-city-clear">
            <svg>...</svg> <!-- Ícone X -->
        </button>
    </div>

    <!-- Dropdown -->
    <div class="input-city-dropdown">
        <div class="input-city-search-wrapper">
            <input type="text" class="input-city-search" placeholder="Pesquisar...">
        </div>
        
        <div class="input-city-list">
            <!-- Itens gerados via JS -->
        </div>

        <div class="input-city-footer">
            <span class="input-city-count">0 municípios</span>
        </div>
    </div>

    <!-- Input Oculto (Valor real) -->
    <input type="hidden" name="municipio_id" class="input-city-value">
</div>

---

🚀 Funcionalidades

1. Pesquisa Instantânea: Filtra municípios enquanto digita.
2. Agrupamento: Pode agrupar municípios por UF.
3. Seleção Única: Retorna o ID do município no input hidden.
4. Limpar: Botão para remover a seleção.

---

💻 JavaScript (Lógica Básica)

Este componente geralmente requer um script de acompanhamento para funcionar (popular a lista, filtrar, controlar o dropdown).

// Exemplo simplificado de inicialização
const container = document.querySelector('#meuInputCity');
const trigger = container.querySelector('.input-city-trigger');
const dropdown = container.querySelector('.input-city-dropdown');

trigger.addEventListener('click', () => {
    container.classList.toggle('open');
    dropdown.classList.toggle('open');
});

---

🌓 Dark Mode

Suporte completo ao modo escuro, ajustando cores de fundo do dropdown, hover dos itens e inputs de pesquisa.

---

Mantido por: Equipe Ipeweb