Pular para o conte√ļdo principal

Search

Vis√£o geral#

O componente search, tamb√©m conhecido como barra de pesquisa, √© utilizado para ajudar os usu√°rios a localizarem um determinado conte√ļdo.

Normalmente localizado no canto superior direito acompanhado do ícone de lupa, já que é um ícone amplamente conhecido.

Este componente √© um recurso encontrado na maioria das solu√ß√Ķes e ferramentas digitais, principalmente quando h√° grande quantidade de informa√ß√Ķes.

Tamb√©m permite que os usu√°rios pesquisem conte√ļdos espec√≠ficos se souberem quais termos de pesquisa usar ou quando n√£o conseguirem encontrar o conte√ļdo desejado na navega√ß√£o principal.

O resultado da busca √© exibido atrav√©s do componente listbox, que pode ser acionado din√Ęmicamente na varia√ß√£o active ou manualmente na varia√ß√£o trigger.

Quando usar#

Utilize-o para facilitar o encontro de informa√ß√Ķes nas solu√ß√Ķes, como por exemplo, em uma navega√ß√£o de menu ou listagem de dados.

Anatomia#

Search active#

Esta variação é composta por um input, ani icon (ícone de lupa) e um clear button (botão limpar), além de contornos exibidos ao receber foco tanto no próprio input como também no botão limpar.

Nesta variação, o componente exibe o ícone de lupa à esquerda do input e o botão limpar à direita, conforme imagem à seguir:

Imagem representando quatro estados do componente search active alinhados em duas linhas e colunas.  O primeiro mostra o estado vazio sem foco e abaixo o oposto. O segundo mostra o estado preenchido e abaixo demonstra o foco no ícone de lupa.
  1. Search (Empty)
  2. Ani icon
  3. Placeholder
  4. Search (Filled)
  5. Input text
  6. Clear button
  7. Outline (Focus)

Search trigger#

Já esta variação, também é composta por um input, um clear button (botão limpar) e um button field (botão pesquisar), além de contornos exibidos ao receber foco tanto no próprio input, botão limpar e também no botão pesquisar.

Nesta variação, o componente exibe o botão limpar e o botão pesquisar agrupados à direita do input, conforme imagem à seguir:

Imagem representando quatro estados do componente search trigger alinhados em duas linhas e colunas.  O primeiro mostra o estado vazio sem foco e abaixo o oposto. O segundo mostra o estado preenchido e abaixo demonstra o foco no ícone de lupa.
  1. Search (Empty)
  2. Placeholder
  3. Button field
  4. Search (Filled)
  5. Input text
  6. Clear button
  7. Outline (Focus)

Input text e Placeholder

Ambas varia√ß√Ķes, os textos possuem as mesmas caracter√≠sticas tipogr√°ficas, mudando apenas a cor.

Espaçamento#

Search active#

Os elementos recebem um espaçamento de 0.5rem entre si e são alinhados ao centro, tanto vertical quanto horizontalmente.

Imagem indicando a composição da anatomia do componente search active, e indicando o espaçamento em cada elemento conforme descrição de espaçamento.
  1. Ani icon
  2. Placeholder
  3. Input text
  4. Clear button

Search trigger#

Os elementos recebem as mesmas defini√ß√Ķes da varia√ß√£o active, por√©m os √≠cones uma vez que agrupados √† direita, n√£o recebem espa√ßamento entre si.

Imagem indicando a composição da anatomia do componente search active, e indicando o espaçamento em cada elemento conforme descrição de espaçamento.
  1. Placeholder
  2. Ani icon
  3. Input text
  4. Clear button

Comportamento#

O componente tem duas varia√ß√Ķes de comportamento: active e trigger (gatilho).

Active: ideal para quando a busca √© executada nas informa√ß√Ķes em tela ou numa base de dados em pequena escala, pois ocorre de forma din√Ęmica, sem a necessidade de acionar ap√≥s cada digita√ß√£o.

Trigger: neste caso se aplica o inverso da variação active, sendo ideal para evitar o consumo de dados e performance da aplicação a cada digitação dos usuários, pois só realizará a busca apenas após acionar um gatilho, como pressionar a tecla enter ou clicar no ícone de lupa.

Modo de pesquisa#

O componente possibilita que a pesquisa pelo texto aconteça de duas formas: start with (começa com) e contains (contém).

Starts with: executa uma busca e retorna o resultado do que inicia com o valor pesquisado.

Contains: executa uma busca e retorna o resultado do que contém o valor pesquisado.

Case sensitive

N√£o h√° diferencia√ß√£o em nenhum dos casos acima quanto ao uso de letras mai√ļsculas e min√ļsculas.

Clear button#

O clear button fica disponível a partir de um caractere digitado no campo, ficando visível mesmo após o componente perder o foco. Este elemento também recebe foco por teclado.

Texto longo#

Quando o texto for longo demais para o espaço horizontal disponível, o comportamento varia de acordo com o estado de interação:

Normal: o texto fica truncado, incluindo "‚Ķ‚ÄĚ (retic√™ncias) ao final.

Em foco: as reticências saem, exibindo apenas o que couber no input, sendo possível navegar entre o texto com as setas direcionais.

Leitores de tela

Deve ler o valor completo, sem a necessidade de truncar texto.

Ordem de foco#

A ordem de foco na navegação através da tecla tab, ocorre de acordo com a variação e estado do campo:

Active#
  • Empty (Vazio): Input;
  • With text (Com texto): Input para Button clear.
Trigger#
  • Empty (Vazio): Input para Button field;
  • With text (Com texto): Input para Button clear para Button field.

Boas pr√°ticas#

Foram estruturados os padr√Ķes de usabilidade para auxiliar na utiliza√ß√£o do componente e garantir uma boa experi√™ncia aos usu√°rios. Por isso, √© muito importante que ao utilizar este componente, as pessoas que o projetarem devem levar em considera√ß√£o os seguintes crit√©rios:

  • Utilize labels para apresentar resultados que est√£o sendo exibidos e apresente os resultados mais relevantes primeiro.
  • Exiba uma mensagem clara quando n√£o forem encontrados resultados para busca e sempre que poss√≠vel ofere√ßa outras sugest√Ķes de busca.
  • Mantenha o texto original no campo de input, que facilita a a√ß√£o do usu√°rio caso queira fazer uma nova busca com alguma modifica√ß√£o na pesquisa.
  • Caso seja poss√≠vel detectar um erro de digita√ß√£o, mostre os resultados para a palavra "corrigida", isso evita a frustra√ß√£o de n√£o obter resultados e n√£o for√ßa o usu√°rio a realizar uma nova busca.
  • Quando apropriado, destaque os termos da busca nos resultados.
  • A entrada do campo de pesquisa deve caber em uma linha. N√£o use entradas de pesquisa de v√°rias linhas.
  • Recomenda-se ter apenas uma pesquisa por p√°gina. Se voc√™ precisar de v√°rias pesquisas, rotule-as claramente para indicar sua finalidade.
  • Se poss√≠vel, forne√ßa sugest√Ķes de pesquisa, seja em um helptext ou sugest√£o de pesquisa que √© um autocomplete. Isso ajuda os usu√°rios a encontrar o que est√£o procurando, especialmente se os itens pesquis√°veis forem complexos.

Acessibilidade tratada no componente#

O componente search foi projetado para atender os requisitos das Diretrizes de Acessibilidade para Conte√ļdo Web (WCAG) 2.1. Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente internamente e n√£o devem ser alteradas por quem utilizar. S√£o elas:

  • Permitir a intera√ß√£o via teclado (2.1.1: Keyboard (A));
  • Altera√ß√£o entre os estados precisa ser indicada por mais de um elemento al√©m da cor (1.4.1: Use of Color);
  • Possuir √°rea clic√°vel de pelo menos 44px x 44px para mobile e desktop (2.5.5: Target Size);
  • Textos devem ter uma rela√ß√£o de contraste entre primeiro e segundo plano de ao menos 4.5:1 se peso for regular ou tamanho for menor que 18px ou; 3:1 se peso for bold ou tamanho for maior ou igual que 18px (1.4.3: Contrast (Minimum));
  • Erros durante e ap√≥s o preenchimento de dados em formul√°rios, devem ser identificados de forma espec√≠fica e clara (3.3.1: Language of Page);
  • Forne√ßa sugest√Ķes simples para que o usu√°rio consiga corrigir facilmente os erros de preenchimento (3.3.3: Error Suggestion);
  • Utilizar medidas relativas para possibilitar um zoom de at√© 200% sem perda do conte√ļdo ou funcionalidade (1.4.4: Redimension (A));
  • O estado de foco deve ser sempre preservado, inclusive quando o componente estiver desabilitado (2.4.7: Focus Visible);
  • Utilizar nome, fun√ß√£o e valor adequadamente, pois estes par√Ęmetros s√£o utilizados por tecnologias assistivas para identificar os elementos da interface (4.1.2: Name, Role, Value).