Modo escuro

Search Input

O componente search input serve especificamente para pesquisar algum tipo de conteúdo que irá ser mostrado abaixo, numa tabela ou noutro tipo de componente. O seu comportamento é idêntico a todos os outros campos de input, sendo que contêm micro-interações para que o utilizador tenha feedback do que se está a passar durante a sua utilização. Por norma, é um campo que não é obrigatório e que não tem restrições.

Características Principais

Flexibilidade de Uso

Pode ser adaptado para diferentes tipos de conteúdo, desde simples buscas de texto até consultas mais complexas com filtros e categorias.

Melhoria na Usabilidade

Facilita a interação do utilizador com a plataforma, especialmente em sites com grande volume de informação.

Acesso Rápido à Informação

Permite que os utilizadores encontrem rapidamente o que procuram, digitando palavras-chave ou frases.

Exemplo de Utilização
  • Sites para pesquisa de produtos
  • Bases de dados e bibliotecas digitais
  • Aplicações com conteúdo extenso, como portais de notícias ou blogs

Incorpore o componente Search sempre que desejar oferecer uma maneira eficaz e eficiente para os utilizadores acessarem diretamente o conteúdo desejado, aumentando a satisfação e a eficiência da navegação.

Default

                                            
<label for="default">Título do campo</label>
<div class="gra-search-container">
    <input class="form form-control" type="search" placeholder="Procure aqui">
</div>

Mandatório

                                            
<label class="required-label" for="default">Título do campo</label>
<div class="gra-search-container">
    <input class="form form-control required-field" type="search" placeholder="Procure aqui">
</div>

Desativado

                                            
<label for="default">Título do campo</label>
<div class="gra-search-container">
    <input class="form form-control required-field" value="Design system" disabled type="search" placeholder="Procure aqui">
</div>

Informativo

                                            
<label for="default">Título do campo  <i class="icon-circle-info iconLabel"></i></label>
<div class="gra-search-container">
    <input class="form form-control required-field" type="search" placeholder="Procure aqui">
</div>

Apenas leitura

                                            
<label for="default">Título do campo</label>
<div class="gra-search-container">
    <input class="form form-control required-field" value="Design system" readonly type="search" placeholder="Procure aqui">
</div>
Campo obrigatório

Mensagem de erro

                                            
<label class="required-label" for="default">Título do campo</label>
<div class="gra-search-container">
    <input class="form form-control required-field error" value="Design system" type="search" placeholder="Procure aqui">
    <span class="graRequiredField">Campo obrigatório</span>
</div>
Mensagem de informação

Mensagem de informação

                                            
<label for="default">Título do campo</label>
<div class="gra-search-container">
    <input class="form form-control" type="search" placeholder="Procure aqui">
</div>
<span class="graInfoField">Mensagem de informação</span>