Pular para o conteúdo
Faculdade PhorteDesign System

SearchBar

Em andamento

Formulário de busca de um campo só, sobre o Input do sistema: lupa à esquerda, "Limpar busca" quando há texto, role="search", rótulo para o leitor, envio pelo Enter e, se pedido, o botão "Buscar".

Função
Formulário e ação
Também chamado de
busca, campo de busca, pesquisa, search
Mora em
app/components/molecules/SearchBar.tsx
Última mudança
2026-09-29
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. Com Termo
  3. Interativo
  4. Com botão

Quando usar

Para buscar dentro de uma lista ou de um catálogo, quando a busca é o controle principal da área.

Faça

  • Dê um label que diga o que se busca ("Buscar cursos") — o placeholder some quando se digita.
  • Trate o onSubmit: ele recebe o termo, e o componente já impede o recarregamento da página.
  • Use botaoEnviar quando quem usa pode não saber que o Enter envia.
  • Sem estado no pai, use defaultValue: a busca guarda o próprio texto (E60).

Evite

  • Dois SearchBar na mesma página sem nomes diferentes: são duas regiões de busca com o mesmo nome.

Quando não usar. Para a busca de cursos da página inicial, que exige o tipo de curso, o Hero já traz a dele. Para um campo de texto comum num formulário, o Input.

Anatomia

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

  1. Formulário — `role="search"`, ocupando a largura disponível.
  2. Lupa — Ícone decorativo, à esquerda, dentro do campo.
  3. Campo — O Input do sistema, `type="search"`, com a lupa no encaixe de início.
  4. Limpar busca — Botão de 44×44 que aparece quando há texto.
  5. Buscar — Com `botaoEnviar`: Button primário ao lado do campo.
  6. Rótulo — Só para o leitor de tela (`sr-only`), "Buscar" por padrão.

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
PadrãoBorda --border-interactive, placeholder em cinza.
FocoBorda --border-focus de 2px, por CSS.
Com termoO texto digitado e o botão "Limpar busca" (o X nativo do navegador sai, para não haver dois).

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
EnterEnvia: impede o recarregamento e chama onSubmit — medido: a story mostra "Buscou por: gestao".
Esc ou "Limpar busca" com termoLimpa o campo, chama onLimpar e deixa o foco no campo — conferido no teste da ficha.

Relacionados