Modo escuro

Campos input

Utilize Campos de Input para permitir que os utilizadores introduzam dados ou informações em formulários e outras interfaces interativas. Este componente é fundamental para a recolha de dados e a interação do utilizador com a aplicação ou o site.

Características Principais

Entrada de Dados

Permite a introdução de texto, números, datas, entre outros tipos de dados.

Validação

Suporta mecanismos de validação para garantir que os dados introduzidos são corretos e completos.

Acessibilidade

Deve ser fácil de usar e acessível para todos os utilizadores, incluindo aqueles com necessidades especiais.

Exemplo de Utilização
  • Formulários de registo
  • Filtros
  • Campos de login e password

Incorpore Campos de Input sempre que precisar de recolher informações do utilizador, assegurando uma experiência de entrada de dados clara, eficiente e acessível.

Texto

Default

                                            
<label for="default">Título do campo</label><br>
<input class="form form-control" type="text" placeholder="Introduza aqui o texto">

Mandatório

                                            
<label class="required-label" for="default">Título do campo</label>
<input class="form form-control required-field" type="text" placeholder="Introduza aqui o texto">

Desativado

                                            
<label for="default">Título do campo</label>
<input class="form form-control" disabled type="text" placeholder="Introduza aqui o texto">

Informativo

                                            
<label for="default">Título do campo <i class="icon-circle-info iconLabel"></i></label>
<input class="form form-control" type="text" placeholder="Introduza aqui o texto">

Apenas leitura

                                            
<label for="default">Título do campo</label>
<input class="form form-control" type="text" readonly placeholder="Introduza aqui o texto" value="Eu sou um campo de texto">
Campo obrigatório

Mensagem de erro

                                            
<label class="required-label" for="default">Titulo do campo</label>
<input class="form-control form-error" type="text" placeholder="Introduza aqui o texto">
<span class="graRequiredField">Campo obrigatório</span>
Mensagem de informação

Mensagem de informação

                                            
<label for="default">Titulo do campo</label>
<input class="form-control" type="text" placeholder="Introduza aqui o texto">
<span class="graInfoField">Mensagem de informação</span>

Acessibilidade

                                            
<label for="default">Titulo do campo</label>
<input class="form-control form-accessibility" type="text" placeholder="Introduza aqui o texto">

Texto Longo

Default

                                            
<label for="default">Título do campo</label>
<textarea class="form form-control" rows="4" type="text" placeholder="Introduza aqui o texto"></textarea>

Mandatório

                                            
<label class="required-label" for="default">Título do campo</label>
<textarea class="form form-control required-field" rows="4" type="text" placeholder="Introduza aqui o texto"></textarea>

Desativado

                                            
<label for="default">Título do campo</label>
<textarea class="form form-control" rows="4" disabled type="text" placeholder="Introduza aqui o texto"></textarea>

Informativo

                                            
<label for="default">Título do campo <i class="icon-circle-info iconLabel"></i></label>
<textarea class="form form-control" rows="4" type="text" placeholder="Introduza aqui o texto"></textarea>

Apenas leitura

                                            
<label for="default">Título do campo</label>
<textarea class="form form-control" rows="4" type="text" readonly placeholder="Introduza aqui o texto">Eu sou um campo de texto longo</textarea>
Campo obrigatório

Mensagem de erro

                                            
<label class="required-label" for="default">Titulo do campo</label>
<textarea class="form-control form-error" rows="4" type="text" placeholder="Introduza aqui o texto"></textarea>
<span class="graRequiredField">Campo obrigatório</span>
Mensagem de informação

Mensagem de informação

                                            
<label for="default">Titulo do campo</label>
<textarea class="form-control" rows="4" type="text" placeholder="Introduza aqui o texto"></textarea>
<span class="graInfoField">Mensagem de informação</span>
0 de 500

Contador de palavras

                                            
<label for="default">Titulo do campo</label>
<textarea class="form-control gra-counter-field" rows="4" type="text" placeholder="Introduza aqui o texto"></textarea>
<span class="graCounterWords" data-max-words="500">0 de 500</span>

Contacto

Default

                                            
<label for="default">Título do campo</label>
<div class="gra-input-group">
    <select class="gra-select gra-simple-select form-select">
        <option value="+351">+351</option>
        <option value="+1">+1</option>
        <option value="+44">+44</option>
    </select>
    <input class="form form-control gra-phone-number" type="tel" placeholder="000 000 000" maxlength="11" />
</div>

Mandatório

                                            
<label class="required-label" for="default">Título do campo</label>
<div class="gra-input-group">
    <select class="gra-select gra-simple-select form-select" >
        <option value="+351">+351</option>
        <option value="+1">+1</option>
        <option value="+44">+44</option>
    </select>
    <input class="form form-control gra-phone-number required-field-group" type="tel" placeholder="000 000 000" maxlength="11" />
</div>

Desativado

                                            
<label for="default">Título do campo</label>
<div class="gra-input-group">
    <select class="gra-select gra-simple-select form-select disabled" disabled>
        <option value="+351">+351</option>
        <option value="+1">+1</option>
        <option value="+44">+44</option>
    </select>
    <input class="form form-control gra-phone-number" disabled type="tel" placeholder="000 000 000" maxlength="11" />
</div>

Informativo

                                            
<label for="default">Título do campo <i class="icon-circle-info iconLabel"></i></label>
<div class="gra-input-group">
    <select class="gra-select gra-simple-select form-select">
        <option value="+351">+351</option>
        <option value="+1">+1</option>
        <option value="+44">+44</option>
    </select>
    <input class="form form-control gra-phone-number" type="tel" placeholder="000 000 000" maxlength="11" />
</div>

Apenas leitura

                                            
<label for="default">Título do campo</label>
<div class="gra-input-group">
    <select class="gra-select gra-simple-select form-select" readonly disabled>
        <option value="+351" selected>+351</option>
        <option value="+1">+1</option>
        <option value="+44">+44</option>
    </select>
    <input class="form form-control gra-phone-number" readonly type="tel" value="123 456 789" placeholder="000 000 000" maxlength="11" />
</div>
Campo obrigatório

Mensagem de erro

                                            
<label class="required-label" for="default">Título do campo</label>
<div class="gra-input-group">
    <select class="form-select error" required>
        <option value="+351">+351</option>
        <option value="+1">+1</option>
        <option value="+44">+44</option>
    </select>
    <input class="form form-control gra-phone-number required-field-group error" required type="tel" placeholder="000 000 000" maxlength="11" />
</div>
<span class="graRequiredFieldGroup">Campo obrigatório</span>
Mensagem de informação

Mensagem de informação

                                            
<label for="default">Título do campo</label>
<div class="gra-input-group">
    <select class="gra-select gra-simple-select form-select">
        <option value="+351">+351</option>
        <option value="+1">+1</option>
        <option value="+44">+44</option>
    </select>
    <input class="form form-control gra-phone-number" required type="tel" placeholder="000 000 000" maxlength="11" />
</div>
<span class="graInfoField">Mensagem de informação</span>

Código

Default

                                            
<label for="default">Título do campo</label>
<div class="gra-input-group-code">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
</div>

Mandatório

                                            
<label class="required-label" for="default">Título do campo</label>
<div class="gra-input-group-code gra-input-group">
    <input type="text" maxlength="1" class="form form-control input-code required-field-group" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code required-field-group" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code required-field-group" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code required-field-group" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code required-field-group" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code required-field-group" placeholder="0">
</div>

Desativado

                                            
<label for="default">Título do campo</label>
<div class="gra-input-group-code gra-input-group">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0" disabled>
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0" disabled>
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0" disabled>
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0" disabled>
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0" disabled>
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0" disabled>
</div>

Informativo

                                            
<label for="default">Título do campo <i class="icon-circle-info iconLabel"></i></label>
<div class="gra-input-group-code gra-input-group">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
</div>

Apenas leitura

                                            
<label for="default">Título do campo</label>
<div class="gra-input-group-code gra-input-group">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0" value="1" readonly>
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0" value="2" readonly>
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0" value="3" readonly>
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0" value="4" readonly>
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0" value="5" readonly>
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0" value="6" readonly>
</div>
Campo obrigatório

Mensagem de erro

                                            
<label class="required-label" for="default">Título do campo</label>
<div class="gra-input-group-code gra-input-group">
    <input type="text" maxlength="1" class="form form-control input-code required-field-group error" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code required-field-group error" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code required-field-group error" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code required-field-group error" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code required-field-group error" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code required-field-group error" placeholder="0">
</div>
<span class="graRequiredFieldGroup">Campo obrigatório</span>
Mensagem de informação

Mensagem de informação

                                            
<label for="default">Título do campo</label>
<div class="gra-input-group-code gra-input-group">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
    <input type="text" maxlength="1" class="form form-control input-code" placeholder="0">
</div>
<span class="graInfoField">Mensagem de informação</span>

Palavra-passe

Comprimento Mínimo e Máximo

Mínimo: A palavra-passe deve ter no mínimo 8 caracteres. Esse é o comprimento recomendado para garantir um nível básico de segurança.

Máximo: Evite impor um limite máximo muito restritivo, permitindo até 64 caracteres para acomodar frases-senha.

Complexidade

Inclua pelo menos um caractere de cada um dos seguintes tipos:

  • Letra maiúscula (A-Z)
  • Letras minúscula (a-z)
  • Dígito (0-9)
  • Caractere especial (por exemplo, !, @, #, $, %, etc.)

Padrões Comuns

Evite palavras-passe que sejam fáceis de adivinhar, como "password", "123456", ou qualquer padrão de teclas sequencial.

Bloqueie palavras-passe que contenham o nome do utilizador ou partes óbvias de informações pessoais.

Default

                                            
<label for="default">Palavra-passe</label>
<div class="gra-password-container">
    <input class="form form-control gra-password" type="password" placeholder="Adicione a palavra-passe">
</div>

Mandatório

                                            
<label class="required-label" for="default">Palavra-passe</label>
<div class="gra-password-container">
    <input class="form form-control gra-password required-field" type="password" placeholder="Adicione a palavra-passe">
</div>

Desativado

                                            
<label for="default">Palavra-passe</label>
<div class="gra-password-container">
    <input class="form form-control gra-password required-field" value="123456" disabled type="password" placeholder="Adicione a palavra-passe">
</div>

Informativo

                                            
<label for="default">Palavra-passe  <i class="icon-circle-info iconLabel"></i></label>
<div class="gra-password-container">
    <input class="form form-control gra-password required-field" type="password" placeholder="Adicione a palavra-passe">
</div>

Apenas leitura

                                            
<label for="default">Palavra-passe</label>
<div class="gra-password-container">
    <input class="form form-control gra-password required-field" value="123456" readonly type="password" placeholder="Adicione a palavra-passe">
</div>
Campo obrigatório

Mensagem de erro

                                            
<label class="required-label" for="default">Palavra-passe</label>
<div class="gra-password-container">
    <input class="form form-control gra-password required-field error" value="123456" type="password" placeholder="Adicione a palavra-passe">
    <span class="graRequiredField">Campo obrigatório</span>
</div>
Mensagem de informação

Mensagem de informação

                                            
<label for="default">Palavra-passe</label>
<div class="gra-password-container">
    <input class="form form-control gra-password" type="password" placeholder="Adicione a palavra-passe">
</div>
<span class="graInfoField">Mensagem de informação</span>