Design Sistem

Elementos de formulário



Inputs

Os inputs são campos utilizados para inserir textos. Para estilizar um input,
basta atribuir à classe o padrão input-custom-(tamanho).

Além disso os inputs podem ocupar toda a linha ou ser do tipo área para digitação.
Para isso, utilize as classes input-custom-linha ou input-custom-area.

Tamanhos







Linha toda



Área de textos grandes



<label for="">Input pequeno</label> <input type="text" class="input-custom-pequeno" placeholder="Pequeno"> <label for="">Input Medio</label> <input type="text" class="input-custom-medio" placeholder="Médio"> <label for="">Input Grande</label> <input type="text" class="input-custom-grande" placeholder="Grande"> <label for="">Input linha toda</label> <input type="text" class="input-custom-linha" placeholder="Pequeno">
<label for="mensagem" class="form-label">Textos grandes</label> <textarea class="form-control input-custom-area" id="mensagem" rows="4" placeholder="Escreva aqui"></textarea>
<label for="mensagem" class="form-label">Textos grandes</label> <textarea class="form-control input-custom-area" id="mensagem" rows="4" placeholder="Escreva aqui"></textarea>



Selects

Os elementos <select> criam listas suspensas, e podem ter diferentes tamanhos conforme a classe aplicada: select-pequeno, select-medio, select-grande ou select-linha, que ocupa toda a largura disponível.

Os radio buttons e checkboxes possuem estilo arredondado aplicando as classes radio-custom-arredondado e checkbox-custom-arredondado, respectivamente, para um visual mais moderno e uniforme.

Tamanhos Select








Linha toda



Apenas uma opção




Múltiplas Escolhas


<select class="select-pequeno">   <option>Opção 1</option>   <option>Opção 2</option> </select> <select class="select-medio">   <option>Opção 1</option>   <option>Opção 2</option> </select> <select class="select-grande">   <option>Opção 1</option>   <option>Opção 2</option> </select>
<select class="select-linha">   <option>Opção 1</option>   <option>Opção 2</option> </select>

<div class="form-check mb-3">   <input class="form-check-input radio-custom-arredondado" type="radio" name="flexRadio" id="radio1">   <label class="form-check-label" for="radio1">     Masculino   </label> </div> <div class="form-check mb-3">   <input class="form-check-input radio-custom-arredondado" type="radio" name="flexRadio" id="radio2">   <label class="form-check-label" for="radio2">     Feminino   </label> </div>

<div class="form-check mb-3">   <input class="form-check-input checkbox-custom-arredondado" type="checkbox" value="" id="check1">   <label class="form-check-label" for="check1">     Aceito os termos   </label> </div> <div class="form-check mb-3">   <input class="form-check-input checkbox-custom-arredondado" type="checkbox" value="" id="check2">   <label class="form-check-label" for="check1">     Aceito a politica de privacidade   </label> </div>


Uploads

Os inputs são campos utilizados para inserir textos. Para estilizar um input,
basta atribuir à classe o padrão input-custom-(tamanho).

Além disso os inputs podem ocupar toda a linha ou ser do tipo área para digitação.
Para isso, utilize as classes input-custom-linha ou input-custom-area.

Tamanhos

linha toda

Enviar múltiplos arquivos



<div class="mb-3">   <input class="form-control arquivo-pequeno" type="file" id="arquivo-pequeno"> </div> <div class="mb-3">   <input class="form-control arquivo-medio" type="file" id="arquivo-medio"> </div> <div class="mb-3">   <input class="form-control arquivo-grande" type="file" id="arquivo-grande"> </div> <div class="mb-3">   <input class="form-control arquivo-linha" type="file" id="arquivo-linha"> </div> <div class="mb-3">   <label for="arquivos-multiplos" class="form-label"></label>   <input class="form-control input-custom-arredondado" type="file" id="arquivos-multiplos" multiple> </div>



Formulário de exemplo



<form>   <div class="mb-3">     <label for="nome" class="form-label">Nome completo</label>     <input type="text" class="form-control input-custom-pequeno" id="nome" placeholder="Digite seu nome">   </div>   <div class="mb-3">     <label for="email" class="form-label">E-mail</label>     <input type="email" class="form-control input-custom-pequeno" id="email" placeholder="exemplo@email.com">   </div>   <div class="mb-3">     <label for="telefone" class="form-label">Telefone</label>     <input type="tel" class="form-control input-custom-pequeno" id="telefone" placeholder="(00) 00000-0000">   </div>   <div class="mb-3">     <label for="assunto" class="form-label">Assunto</label>     <select class="form-select input-custom-pequeno" id="assunto">       <option selected>Selecione...</option>       <option>Suporte</option>       <option>Orçamento</option>       <option>Dúvidas</option>     </select>   </div>   <div class="mb-3">     <label for="arquivo" class="form-label">Anexar arquivo</label>     <input class="form-control input-custom-pequeno" type="file" id="arquivo">   </div>   <div class="mb-3">     <label for="arquivos" class="form-label">Anexar múltiplos arquivos</label>     <input class="form-control input-custom-pequeno" type="file" id="arquivos" multiple>   </div>   <div class="mb-3">     <label for="mensagem" class="form-label">Mensagem</label>     <textarea class="form-control input-grande-arredondado" id="mensagem" rows="4" placeholder="Digite sua mensagem"></textarea>   </div>   <button type="submit" class="btn-custom-verde-vazado-medio-arredondado">Enviar</button> </form>