Input Search
Campo de pesquisa com autocomplete via dropdown. Ícone de busca à esquerda, botão de limpar à direita. Dropdown com texto, texto de suporte ou avatar. Dark mode automático via tokens semânticos.
Variantes
Clique no campo para ver o dropdown. O exemplo com avatar possui rolagem.
Carregando exemplo...
Propriedades
Classes disponíveis para configurar o input search.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.input-search-group | classe | — | Wrapper flex column do componente. |
.input-search-label | classe | — | Label do campo (14px medium). |
.input-search-container | classe | — | Container relativo para posicionar o dropdown. |
.input-search-field | classe | — | Campo visual (40px, ícone de busca à esquerda). |
.input-search-icon | classe | — | Ícone de busca (18x18). |
.input-search-input | classe | — | Input nativo dentro do field. |
.input-search-clear | classe | — | Botão de limpar (16x16), visível com valor. |
.input-search-support | classe | — | Texto de suporte no campo preenchido (12px). |
.input-search-helper | classe | — | Texto de apoio abaixo do campo (12px). |
.is-active | classe | — | Campo focado, dropdown aberto. |
.has-value | classe | — | Campo com valor, mostra botão limpar. |
.has-error | classe | — | Estado de erro. |
.is-disabled | classe | — | Desabilita o campo. |
Código
Snippets prontos para copiar e usar.
Pesquisa simples
html
<div class="input-search-group">
<label class="input-search-label">Label</label>
<div class="input-search-container">
<div class="input-search-field">
<span class="input-search-icon"><!-- SVG search --></span>
<input type="text" class="input-search-input" placeholder="Pesquisar por...">
<button class="input-search-clear"><!-- SVG close --></button>
</div>
<div class="dropdown-menu">
<div class="dropdown-list">
<button class="dropdown-item">
<span class="dropdown-item-label">Opção 01</span>
</button>
</div>
</div>
</div>
</div>Pesquisa com avatar (usuários)
html
<div class="input-search-group">
<label class="input-search-label">Label</label>
<div class="input-search-container">
<div class="input-search-field">
<span class="input-search-icon"><!-- SVG search --></span>
<input type="text" class="input-search-input" placeholder="Nome, CPF ou CNPJ">
<button class="input-search-clear"><!-- SVG close --></button>
</div>
<div class="dropdown-menu">
<div class="dropdown-list custom-scroll">
<button class="dropdown-item dropdown-item--avatar">
<img class="dropdown-item-avatar" src="foto.jpg" alt="">
<span class="dropdown-item-content">
<span class="dropdown-item-label">José Souza</span>
<span class="dropdown-item-support">568.246.943-52</span>
</span>
</button>
</div>
</div>
</div>
</div>Tokens utilizados
Variáveis semânticas aplicadas ao componente.
| Token | Uso |
|---|---|
--surface-base-neutral-container-default | Background do campo |
--surface-base-neutral-container-hover | Background no hover |
--surface-base-neutral-container-emphasis | Background disabled |
--border-base-neutral-default | Borda padrão |
--border-base-neutral-strong | Borda no foco |
--border-base-error-default | Borda no erro |
--text-base-neutral-default | Cor do texto e label |
--text-base-neutral-subtle | Cor do placeholder e suporte |
--text-base-error-default | Cor do texto no erro |
--icon-base-neutral-default | Cor do ícone de busca |
--icon-base-neutral-subtle | Cor do ícone limpar / disabled |
--icon-base-error-secondary | Cor do ícone no erro |
--radius-default | Border-radius do campo (6px) |