Search Field
📘 Modo de Uso
cuidado
Atenção: O componente Search Field é uma variação do componente Text Input.
Ele foi criado para situações em que o campo de entrada deve ser usado especificamente para pesquisas.
O componente Search Field permite que os usuários encontrem informações rapidamente dentro de um aplicativo.
Eles inserem uma consulta no campo de texto e recebem os resultados relacionados em seguida.
Quando usar:
- Como barra de pesquisa persistente e destacada no topo da tela, quando a pesquisa é a funcionalidade principal.
- Em áreas contextuais da interface, quando a busca for complementar ou auxiliar.
🧩 Anatomia
📋 Propriedades
⌨️ Código
opl.input.component.searchField
🎨 Variantes
Estados
Tamanhos
Semântica
📃 Observações
- Pode incluir ícones de pesquisa e de limpar texto para facilitar a interação.
- Recomenda-se suportar pesquisas parciais e autocompletar para reduzir esforço do usuário.
- Em dispositivos móveis, o Search Field deve ocupar largura total quando usado como barra principal.
🛡️ Boas Práticas e Acessibilidade
- Use labels claras e concisas. WCAG 2.1: 1.3.1 Informações e Relações.
- Prefira texto auxiliar para instruções em vez de apenas placeholder. WCAG 2.1: 3.3.2 Rótulos ou Instruções.
- Certifique-se de que os resultados de pesquisa sejam anunciados de forma acessível a leitores de tela. WCAG 2.1: 4.1.3 Mensagens de Status.
- Para pesquisas que não retornarem resultados, apresente mensagem clara e sugestiva, evitando “vazio” sem contexto.