Início / Componentes / Tabs

Tabs

Tabs organizam conteúdo relacionado em alternativas. O usuário escolhe o que ver — só uma aba por vez está ativa. É usado para organização, não como substituto de navegação.

Quando usar tabs

Tabs funcionam quando o conteúdo é mutuamente exclusivo — o usuário não precisa das duas abas ao mesmo tempo:

  • Código em diferentes linguagens (JS, TS, Python)
  • Configurações de diferentes categorias
  • Detalhes de um item em perspectivas diferentes (visão geral, histórico, configurações)

Para outros casos, existem alternativas melhores. Accordion se o usuário precisa comparar seções. Stepper se é uma sequência com ordem obrigatória. Páginas separadas se o conteúdo é extenso demais para uma aba.

Decisões visuais: tipografia, cor, espaçamento. O que o usuário vê e sente ao interagir com o sistema.

O padrão WAI-ARIA para tabs define comportamento específico de teclado que usuários experientes esperam:

  • Tab: entra no grupo de tabs; Tab novamente pula para o conteúdo ativo
  • Arrow Left / Arrow Right: move o foco entre as tabs
  • Home / End: vai para a primeira ou última tab

Existem dois modos de ativação. No modo automático, a tab recebe foco e já ativa. No modo manual, o usuário precisa pressionar Enter ou Space para ativar. O modo automático é mais simples e preferível quando o conteúdo carrega instantaneamente.

Estado ativo

A tab ativa precisa ser visualmente clara e semanticamente correta:

  • aria-selected="true" na tab ativa, false nas demais
  • tabindex="0" na ativa, tabindex="-1" nas outras — padrão roving tabindex
  • Visual: borda inferior, peso de fonte, cor diferente — qualquer distinção clara além de cor pura

A decisão

A implementação com JavaScript puro segue o padrão WAI-ARIA: roving tabindex, Arrow keys, Home/End, aria-selected. O estado ativo é estilizado via CSS.

/* HTML */
<div class="tabs" role="tablist">
  <button role="tab" aria-selected="true" tabindex="0" data-tab="design">Design</button>
  <button role="tab" aria-selected="false" tabindex="-1" data-tab="codigo">Código</button>
</div>

<div role="tabpanel" data-panel="design">
  Conteúdo da aba Design
</div>
<div role="tabpanel" data-panel="codigo" hidden>
  Conteúdo da aba Código
</div>
/* CSS */
.tabs button[aria-selected="true"] {
  border-bottom: 2px solid var(--primary);
  font-weight: 500;
}

O aria-selected indica qual aba está ativa. O atributo hidden no painel inativo é a forma mais simples de controla visibilidade sem JavaScript.

Anterior

Modais

Próximo

Tokens