Select
Campo de seleção única e múltipla. Reutiliza a base visual do input, com dropdown e scroll customizados. Multi-select com chips e overflow "+N". Dark mode automático via tokens semânticos.
Seleção única
Clique no campo para abrir o dropdown e selecionar uma opção.
Carregando exemplo...
Seleção múltipla
Selecione várias opções. Chips que excedem a largura são substituídos por "+N".
Carregando exemplo...
Propriedades
Classes disponíveis para configurar o select.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.select-group | classe | — | Wrapper flex column do componente. |
.select-label | classe | — | Label do campo (14px medium). |
.select-container | classe | — | Container relativo para posicionar o dropdown. |
.select-trigger | classe | — | Campo trigger (40px, mesma base do input). |
.select-trigger--multi | classe | — | Trigger com suporte a chips (multi-select). |
.select-placeholder | classe | — | Texto placeholder dentro do trigger. |
.select-value | classe | — | Valor selecionado dentro do trigger. |
.select-chevron | classe | — | Ícone chevron (16x16), rotaciona ao abrir. |
.select-chips | classe | — | Container dos chips (multi-select). |
.select-chip | classe | — | Chip individual (26px, radius 4px). |
.select-chip--overflow | classe | — | Chip "+N" indicando opções ocultas. |
.select-chip-close | classe | — | Botão de remover chip (12x12). |
.select-helper | classe | — | Texto de apoio abaixo do campo (12px). |
.is-open | classe | — | Ativa o dropdown e rotaciona o chevron. |
.is-disabled | classe | — | Desabilita o trigger. |
.has-error | classe | — | Ativa estado de erro no .select-group. |
Código
Snippets prontos para copiar e usar.
Seleção única
html
<div class="select-group" id="meu-select">
<label class="select-label">Label</label>
<div class="select-container">
<div class="select-trigger">
<span class="select-placeholder">Selecione</span>
<span class="select-chevron">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 6l4 4 4-4"/>
</svg>
</span>
</div>
<div class="dropdown-menu dropdown-menu--bottom">
<div class="dropdown-list custom-scroll">
<button class="dropdown-item">
<span class="dropdown-item-label">Opção 1</span>
</button>
<!-- mais itens -->
</div>
</div>
</div>
</div>Seleção múltipla com chips
html
<div class="select-group">
<label class="select-label">Label</label>
<div class="select-container">
<div class="select-trigger select-trigger--multi">
<div class="select-chips">
<span class="select-chip">
<span>Opção 1</span>
<button class="select-chip-close">
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round">
<path d="M3 3l6 6M9 3l-6 6"/>
</svg>
</button>
</span>
<span class="select-chip select-chip--overflow">+3</span>
</div>
<span class="select-chevron"><!-- svg --></span>
</div>
<div class="dropdown-menu">
<div class="dropdown-list custom-scroll">
<!-- itens com checkbox -->
</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 / chip |
--border-base-neutral-default | Borda padrão |
--border-base-neutral-strong | Borda no foco |
--border-base-neutral-subtle | Borda no disabled |
--border-base-error-default | Borda no erro |
--text-base-neutral-default | Cor do label, valor e chip |
--text-base-neutral-subtle | Cor do placeholder |
--text-base-error-default | Cor do texto no erro |
--icon-base-neutral-default | Cor do chevron |
--icon-base-neutral-subtle | Cor do chip close / chevron disabled |
--radius-default | Border-radius do campo (6px) |