Modo escuro

Dropdown

O componente de campo dropdown serve especificamente para selecionar uma ou várias opções listadas dentro da mesma. Quando o utilizador clica sobre o campo, vai abrir uma lista de opções, das quais ele poderá selecionar. O seu comportamento é igual 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.

Características Principais

Economia de Espaço

Apresenta múltiplas opções em um espaço compacto, expandindo apenas quando necessário.

Seleção de Opções

Facilita a escolha entre várias alternativas sem sobrecarregar a interface.

Flexibilidade

Pode ser utilizado para navegação, seleção de valores em formulários, e outras interações.

Exemplo de Utilização
  • Menus de navegação
  • Seleção de categorias ou filtros
  • Escolha de opções em formulários

Incorpore Dropdowns sempre que precisar oferecer múltiplas opções de forma organizada e eficiente, melhorando a clareza e a experiência do utilizador na interface.

Select simples

Default

                                            
<label for="default">Título do campo</label>
<select class="gra-select gra-simple-select form-select">
    <option value="" selected>Selecione</option>
    <option value="lorem1">Lorem ipsum 1</option>
    <option value="lorem2">Lorem ipsum 2</option>
    <option value="lorem3">Lorem ipsum 3</option>
    <option value="lorem4">Lorem ipsum 4</option>
</select>

Mandatório

                                            
<label class="required-label" for="default">Título do campo</label>
<select class="gra-select gra-simple-select form-select required-field">
    <option value="" selected>Selecione</option>
    <option value="lorem1">Lorem ipsum 1</option>
    <option value="lorem2">Lorem ipsum 2</option>
    <option value="lorem3">Lorem ipsum 3</option>
    <option value="lorem4">Lorem ipsum 4</option>
</select>

Desativado

                                            
<label for="default">Título do campo</label>
<select class="gra-select gra-simple-select form-select disabled" disabled>
    <option value="" selected>Selecione</option>
    <option value="lorem1">Lorem ipsum 1</option>
    <option value="lorem2">Lorem ipsum 2</option>
    <option value="lorem3">Lorem ipsum 3</option>
    <option value="lorem4">Lorem ipsum 4</option>
</select>

Informativo

                                            
<label for="default">Título do campo <i class="icon-circle-info iconLabel"></i></label>
<select class="gra-select gra-simple-select form-select">
    <option value="" selected>Selecione</option>
    <option value="lorem1">Lorem ipsum 1</option>
    <option value="lorem2">Lorem ipsum 2</option>
    <option value="lorem3">Lorem ipsum 3</option>
    <option value="lorem4">Lorem ipsum 4</option>
</select>

Apenas leitura

                                            
<label for="default">Título do campo</label>
<select class="gra-select gra-simple-select form-select" readonly disabled>
    <option value="">Selecione</option>
    <option value="lorem1" selected>Lorem ipsum 1</option>
    <option value="lorem2">Lorem ipsum 2</option>
    <option value="lorem3">Lorem ipsum 3</option>
    <option value="lorem4">Lorem ipsum 4</option>
</select>
Mensagem de informação

Mensagem de informação

                                            
<label for="default">Título do campo</label>
<select class="gra-select gra-simple-select form-select">
    <option value="" selected>Selecione</option>
    <option value="lorem1">Lorem ipsum 1</option>
    <option value="lorem2">Lorem ipsum 2</option>
    <option value="lorem3">Lorem ipsum 3</option>
    <option value="lorem4">Lorem ipsum 4</option>
</select>
<span class="graInfoField">Mensagem de informação</span>

Acessibilidade

                                            
<label for="default">Título do campo</label>
<select class="gra-select gra-simple-select form-select form-accessibility">
    <option value="" selected>Selecione</option>
    <option value="lorem1">Lorem ipsum 1</option>
    <option value="lorem2">Lorem ipsum 2</option>
    <option value="lorem3">Lorem ipsum 3</option>
    <option value="lorem4">Lorem ipsum 4</option>
</select>

Pesquisa

                                            
<label for="default">Título do campo</label>
<select class="gra-select gra-simple-select with-search form-select">
    <option value="" selected>Selecione</option>
    <option value="lorem1">Lorem ipsum 1</option>
    <option value="lorem2">Lorem ipsum 2</option>
    <option value="lorem3">Lorem ipsum 3</option>
    <option value="lorem4">Lorem ipsum 4</option>
</select>

Multi select com checkbox

                                            
<label for="multipleSelect1">Título do campo</label>
<select class="gra-select gra-multiple-select with-checkbox form-select" multiple id="multipleSelect1">
    <option value="">Selecione</option>
    <option value="lorem1">Lorem ipsum 1</option>
    <option value="lorem2">Lorem ipsum 2</option>
    <option value="lorem3">Lorem ipsum 3</option>
    <option value="lorem4">Lorem ipsum 4</option>
</select>

Multi select com radiobox

                                            
<label for="multipleSelect2">Título do campo</label>
<select class="gra-select gra-multiple-select with-radiobox form-select" multiple id="multipleSelect2">
    <option value="">Selecione</option>
    <option value="lorem1">Lorem ipsum 1</option>
    <option value="lorem2">Lorem ipsum 2</option>
    <option value="lorem3">Lorem ipsum 3</option>
    <option value="lorem4">Lorem ipsum 4</option>
</select>