Pular para o conteúdo
Faculdade PhorteDesign System

FilterGroup

Em andamento

Fileira de pílulas que filtram uma lista na hora. No modo único (padrão) é um grupo de rádio — uma marcada por vez, com as setas; no modo múltiplo, cada pílula alterna. A marcada fica em vermelho e com o visto. Rola na horizontal quando não cabe.

Função
Formulário e ação
Também chamado de
filtros, pílulas, chips, categorias, filtro rápido
Mora em
app/components/molecules/FilterGroup.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Interativo
  3. Múltiplo
  4. Com contagem e desabilitada

Quando usar

Acima de uma grade ou lista, para trocar entre recortes dela sem sair da página — áreas de curso, categorias do blog. O modo múltiplo, quando os recortes se somam ("Saúde" e "Gestão").

Faça

  • Dê um label que diga o que se filtra ("Áreas do curso"): é o nome do grupo para o leitor.
  • Escolha o modo pela forma de escolha: unico quando só um recorte vale por vez, multiplo quando eles se somam — e aí o selected é uma lista.
  • Deixe uma opção "Todos" como primeira, marcada por padrão, no modo único.
  • Separe o que se mostra do que se filtra com { valor, rotulo }: "Negócios" pode filtrar por negocios.
  • Use contagem quando o número ajuda a escolher, e desabilitado para o recorte vazio que ainda vale ver.

Evite

  • Muitas opções: além de oito ou dez, a fileira vira rolagem que ninguém vê (a barra de rolagem é escondida).
  • Usar para navegar entre páginas: é filtro, não menu.
  • Modo único para recortes que se somam: a pessoa tenta marcar dois e perde o primeiro.

Quando não usar. Para alternar entre painéis de conteúdo, use o CourseTabs. Para muitos filtros combinados, o CourseFilterSidebar. Num formulário, para escolha única, o Radio.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Grupo — Modo único: `role="radiogroup"`; múltiplo: `role="group"`. O `label` é o nome; rola na horizontal sem barra visível.
  2. Pílula — Um `<button>`: `role="radio"` com `aria-checked` no modo único, `aria-pressed` no múltiplo. Texto negrito `text-sm`, cantos redondos.
  3. Visto — Ícone `Check` de 16px antes do rótulo, só na marcada, com `aria-hidden` (o estado já vai no atributo).
  4. Contagem — Com `contagem`, o número depois do rótulo, em peso médio.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
MarcadaFundo e borda --primary, texto branco e o visto; aria-checked (ou aria-pressed) "true".
Não marcadaFundo --card, texto --muted-foreground, borda de controle --border-interactive, sem visto.
Hover (não marcada)Fundo --muted.
FocoO anel de foco (anel-de-foco), só no teclado.
DesabilitadaA 50%, cursor proibido, fora do Tab e pulada pelas setas.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Escolher no modo únicoChama onSelect com o valor; quem guarda a escolhida é o consumidor (selected). Conferido no teste da ficha: a nova fica com aria-checked="true" e a anterior volta a false.
Com `contagem`O número entra no nome, separado: "Todas, 42" — conferido no teste da ficha.
Escolher no modo múltiploChama onSelect com a lista nova — a pílula entra ou sai dela. Conferido no teste da ficha.

Relacionados