Use Select menu quando a interface precisar de select acessível e customizável com teclado.
Select menu
Select acessível e customizável com teclado. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.
Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Básico
Básico, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-select-menu" data-value="op1">
<button class="sc-select-trigger" type="button" aria-label="Select básico">
<span class="sc-select-value">Selecione⬦</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover" role="listbox" tabindex="-1">
<div class="sc-select-option" role="option" tabindex="0" data-value="op1" data-label="Opção 1">Opção 1</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="op2" data-label="Opção 2">Opção 2</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="op3" data-label="Opção 3">Opção 3</div>
</div>
</div>Classes, JavaScript e API
Inicialize selectMenu após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- selectMenu
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Compact
Compact, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-select-menu sc-select-sm" data-value="c1" style="max-width: 360px;">
<button class="sc-select-trigger" type="button" aria-label="Select compacto">
<span class="sc-select-value">Compact</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover" role="listbox" tabindex="-1">
<div class="sc-select-option" role="option" tabindex="0" data-value="c1" data-label="Compact 1">Compact 1</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="c2" data-label="Compact 2">Compact 2</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="c3" data-label="Compact 3">Compact 3</div>
</div>
</div>Classes, JavaScript e API
Inicialize selectMenu após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- selectMenu
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Trigger com ícone + opções com subtítulo
Trigger com ícone + opções com subtítulo, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-select-menu" data-value="plan2" style="max-width: 460px;">
<button class="sc-select-trigger" type="button" aria-label="Plano">
<span class="sc-select-left">
<i class="sc-icon" data-smart-icon="star"></i>
<span class="sc-select-value">Selecione um plano⬦</span>
</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover" role="listbox" tabindex="-1">
<div class="sc-select-option" role="option" tabindex="0" data-value="plan1" data-label="Starter">
<span class="sc-select-option-left">
<i class="sc-icon sc-select-option-icon" data-smart-icon="zap"></i>
<span class="sc-select-option-meta"><span class="sc-select-option-title">Starter</span><span class="sc-select-option-subtitle">Para começar rápido</span></span>
</span>
<span class="sc-select-option-check"></span>
</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="plan2" data-label="Pro">
<span class="sc-select-option-left">
<i class="sc-icon sc-select-option-icon" data-smart-icon="sparkles"></i>
<span class="sc-select-option-meta"><span class="sc-select-option-title">Pro</span><span class="sc-select-option-subtitle">Mais recursos + suporte</span></span>
</span>
<span class="sc-select-option-check"></span>
</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="plan3" data-label="Enterprise">
<span class="sc-select-option-left">
<i class="sc-icon sc-select-option-icon" data-smart-icon="building"></i>
<span class="sc-select-option-meta"><span class="sc-select-option-title">Enterprise</span><span class="sc-select-option-subtitle">Governança e SLA</span></span>
</span>
<span class="sc-select-option-check"></span>
</div>
</div>
</div>Classes, JavaScript e API
Inicialize selectMenu após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- selectMenu
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Grid / palette (2 colunas)
Grid / palette (2 colunas), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-select-menu" data-value="t2" style="max-width: 420px;">
<button class="sc-select-trigger" type="button" aria-label="Tema">
<span class="sc-select-value">Tema</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover sc-select-popover--grid" role="listbox" tabindex="-1">
<div class="sc-select-option" role="option" tabindex="0" data-value="t1" data-label="Clean">Clean</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="t2" data-label="Glass">Glass</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="t3" data-label="Noir">Noir</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="t4" data-label="Retro">Retro</div>
</div>
</div>Classes, JavaScript e API
Inicialize selectMenu após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- selectMenu
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Search + ícones + ripple (fancy)
Search + ícones + ripple (fancy), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-select-menu sc-select-fancy" data-value="cat2" data-search="true" data-ripple="true" style="max-width: 520px;">
<button class="sc-select-trigger" type="button" aria-label="Categorias">
<span class="sc-select-value">Escolha sua categoria⬦</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover" role="listbox" tabindex="-1" aria-label="Categorias">
<div class="sc-select-search">
<div class="sc-select-search-inner">
<input class="sc-input sc-select-search-input" type="text" placeholder="Buscar opções..." aria-label="Buscar opções">
<i class="sc-icon sc-select-search-icon" data-smart-icon="search" aria-hidden="true"></i>
</div>
</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="cat1" data-label="Code & Development"><span class="sc-select-option-left"><i class="sc-icon sc-select-option-icon" data-smart-icon="code"></i><span>Code & Development</span></span><span class="sc-select-option-check"></span></div>
<div class="sc-select-option" role="option" tabindex="0" data-value="cat2" data-label="Music & Sound"><span class="sc-select-option-left"><i class="sc-icon sc-select-option-icon" data-smart-icon="music"></i><span>Music & Sound</span></span><span class="sc-select-option-check"></span></div>
<div class="sc-select-option" role="option" tabindex="0" data-value="cat3" data-label="Photo & Video"><span class="sc-select-option-left"><i class="sc-icon sc-select-option-icon" data-smart-icon="camera"></i><span>Photo & Video</span></span><span class="sc-select-option-check"></span></div>
<div class="sc-select-option" role="option" tabindex="0" data-value="cat4" data-label="Coffee & Chill"><span class="sc-select-option-left"><i class="sc-icon sc-select-option-icon" data-smart-icon="coffee"></i><span>Coffee & Chill</span></span><span class="sc-select-option-check"></span></div>
<div class="sc-select-no-results">
<div style="display:flex; gap:10px; align-items:center; justify-content:center;">
<i class="sc-icon" data-smart-icon="search"></i>
<strong>Nenhum resultado</strong>
</div>
<div class="doc-muted" style="margin-top:6px;">Tente outro termo.</div>
</div>
</div>
</div>Classes, JavaScript e API
Inicialize selectMenu após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- selectMenu
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Validação (valid/invalid)
Validação (valid/invalid), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-grid sc-cols-2 sc-gap-4" style="align-items:start;">
<div class="sc-select-menu" data-value="v1">
<button class="sc-select-trigger is-valid" type="button" aria-label="Select válido">
<span class="sc-select-value">Válido</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover" role="listbox" tabindex="-1">
<div class="sc-select-option" role="option" tabindex="0" data-value="v1" data-label="Válido">Válido</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="v2" data-label="Outro">Outro</div>
</div>
</div>
<div class="sc-select-menu" data-value="i1">
<button class="sc-select-trigger is-invalid" type="button" aria-label="Select inválido">
<span class="sc-select-value">Inválido</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover" role="listbox" tabindex="-1">
<div class="sc-select-option" role="option" tabindex="0" data-value="i1" data-label="Inválido">Inválido</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="i2" data-label="Outro">Outro</div>
</div>
</div>
</div>Classes, JavaScript e API
Inicialize selectMenu após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- selectMenu
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Grupos (separadores)
Grupos (separadores), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-select-menu" data-value="br" style="max-width: 520px;">
<button class="sc-select-trigger" type="button" aria-label="País">
<span class="sc-select-value">Selecione um país⬦</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover" role="listbox" tabindex="-1" aria-label="Países">
<div class="sc-select-sep" role="presentation">América</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="br" data-label="Brasil"><span class="sc-select-option-left"><span class="sc-select-avatar">BR</span><span class="sc-select-option-meta"><span class="sc-select-option-title">Brasil</span><span class="sc-select-option-subtitle">pt-BR</span></span></span><span class="sc-select-option-check"></span></div>
<div class="sc-select-option" role="option" tabindex="0" data-value="us" data-label="Estados Unidos"><span class="sc-select-option-left"><span class="sc-select-avatar">US</span><span class="sc-select-option-meta"><span class="sc-select-option-title">Estados Unidos</span><span class="sc-select-option-subtitle">en-US</span></span></span><span class="sc-select-option-check"></span></div>
<div class="sc-select-sep" role="presentation">Europa</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="pt" data-label="Portugal"><span class="sc-select-option-left"><span class="sc-select-avatar">PT</span><span class="sc-select-option-meta"><span class="sc-select-option-title">Portugal</span><span class="sc-select-option-subtitle">pt-PT</span></span></span><span class="sc-select-option-check"></span></div>
<div class="sc-select-option" role="option" tabindex="0" data-value="de" data-label="Alemanha"><span class="sc-select-option-left"><span class="sc-select-avatar">DE</span><span class="sc-select-option-meta"><span class="sc-select-option-title">Alemanha</span><span class="sc-select-option-subtitle">de-DE</span></span></span><span class="sc-select-option-check"></span></div>
</div>
</div>Classes, JavaScript e API
Inicialize selectMenu após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- selectMenu
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Avatar / time
Avatar / time, preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-select-menu" data-value="t2" style="max-width: 520px;">
<button class="sc-select-trigger" type="button" aria-label="Time">
<span class="sc-select-value">Escolha um time⬦</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover" role="listbox" tabindex="-1">
<div class="sc-select-option" role="option" tabindex="0" data-value="t1" data-label="Design"><span class="sc-select-option-left"><span class="sc-select-avatar">D</span><span class="sc-select-option-meta"><span class="sc-select-option-title">Design</span><span class="sc-select-option-subtitle">UI, identidade, motion</span></span></span><span class="sc-select-option-check"></span></div>
<div class="sc-select-option" role="option" tabindex="0" data-value="t2" data-label="Produto"><span class="sc-select-option-left"><span class="sc-select-avatar">P</span><span class="sc-select-option-meta"><span class="sc-select-option-title">Produto</span><span class="sc-select-option-subtitle">Roadmap e métricas</span></span></span><span class="sc-select-option-check"></span></div>
<div class="sc-select-option" role="option" tabindex="0" data-value="t3" data-label="Engenharia"><span class="sc-select-option-left"><span class="sc-select-avatar">E</span><span class="sc-select-option-meta"><span class="sc-select-option-title">Engenharia</span><span class="sc-select-option-subtitle">Front, API, infra</span></span></span><span class="sc-select-option-check"></span></div>
</div>
</div>Classes, JavaScript e API
Inicialize selectMenu após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- selectMenu
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Status (dot color)
Status (dot color), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-select-menu" data-value="st2" style="max-width: 520px;">
<button class="sc-select-trigger" type="button" aria-label="Status">
<span class="sc-select-value">Status</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover" role="listbox" tabindex="-1">
<div class="sc-select-option" role="option" tabindex="0" data-value="st1" data-label="Em dia">
<span class="sc-select-option-left"><span class="sc-select-dot" style="--sc-dot: var(--sc-success);"></span><span class="sc-select-option-title">Em dia</span></span>
<span class="sc-select-option-check"></span>
</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="st2" data-label="Atenção">
<span class="sc-select-option-left"><span class="sc-select-dot" style="--sc-dot: var(--sc-warning);"></span><span class="sc-select-option-title">Atenção</span></span>
<span class="sc-select-option-check"></span>
</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="st3" data-label="Crítico">
<span class="sc-select-option-left"><span class="sc-select-dot" style="--sc-dot: var(--sc-danger);"></span><span class="sc-select-option-title">Crítico</span></span>
<span class="sc-select-option-check"></span>
</div>
</div>
</div>Classes, JavaScript e API
Inicialize selectMenu após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- selectMenu
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Popover alto (lista grande)
Popover alto (lista grande), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-select-menu" data-value="n7" style="max-width: 420px;">
<button class="sc-select-trigger" type="button" aria-label="Nível">
<span class="sc-select-value">Nível</span>
<span class="sc-select-caret" aria-hidden="true"></span>
</button>
<div class="sc-select-popover" role="listbox" tabindex="-1" aria-label="Níveis">
<div class="sc-select-option" role="option" tabindex="0" data-value="n1" data-label="Nível 1">Nível 1</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="n2" data-label="Nível 2">Nível 2</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="n3" data-label="Nível 3">Nível 3</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="n4" data-label="Nível 4">Nível 4</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="n5" data-label="Nível 5">Nível 5</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="n6" data-label="Nível 6">Nível 6</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="n7" data-label="Nível 7">Nível 7</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="n8" data-label="Nível 8">Nível 8</div>
<div class="sc-select-option" role="option" tabindex="0" data-value="n9" data-label="Nível 9">Nível 9</div>
</div>
</div>Classes, JavaScript e API
Inicialize selectMenu após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- selectMenu
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.