Forms

Ejemplos y pautas de uso para estilos de control de formularios, opciones de diseño y componentes personalizados para crear una amplia variedad de formularios.

Controles de formularios

Los controles de forma textual, como <input>, <select>y <textarea>, están diseñados con la clase ".form__control". Se incluyen estilos para apariencia general, estado de enfoque, tamaño y más.

Nombre

Pais Perú Colombia

Descripción

<form class="form">
   <div class="form__field flex--column">
      <label for="name" class="form__label">Nombre</label>
      <input type="text" class="form__control" id="name" />
   </div>
   
   <div class="form__field flex--column">
      <label for="name" class="form__label">Pais</label>
      <select name="" id="name" class="form__control">
         <option value="value">Perú</option>
         <option value="value">Colombia</option>
      </select>
   </div>
   
   <div class="form__field flex--column">
      <label for="descripcion" class="form__label">Descripción</label>
      <textarea name="emai" id="descripcion" rows="4" class="form__control"></textarea>
   </div>
</form>

Input radio

Estilo para el input de tipo radio.El estilo depende del color ".form__container"

Sexo

Hombre

Mujer

<form>
   <div class="form__field flex--column">
   <span class="text-sub">
      Sexo
   </span>
   <div class="flex">
      <div class="flex mr-5">
         <label class="form__label" for="hombre">Hombre</label>
         <div class="form__container text-primary">
            <input type="radio" name="sexo" class="form__radio" id="hombre">
            <div class="form__content radio"></div>   
         </div>
      </div>
      <div class="flex">
         <label class="form__label" for="mujer">Mujer</label>
         <div class="form__container text-primary">
            <input type="radio" name="sexo" class="form__radio" id="mujer">
            <div class="form__content radio"></div>   
         </div>
      </div>
   </div>
   </div>
</form>

Input checkbox

Estilo para el input de tipo radio.El estilo depende del color ".form__container"

Habiladades

HTML5

CSS

<form>
   <div class="form__field flex--column">
      <span class="text-sub mb-2">
         Habiladades
      </span>
      <div class="flex"> 
         <div class="flex mr-5">
            <label class="form__label" for="html5">HTML5</label>
            <div class="form__container text-primary">
               <input type="checkbox" name="html5" class="form__checkbox" id="html5">
               <div class="form__content checkbox"></div>   
            </div>
         </div>
         <div class="flex">
            <label class="form__label" for="css">CSS</label>
            <div class="form__container text-primary">
               <input type="checkbox" name="css" class="form__checkbox" id="css">
               <div class="form__content checkbox"></div>   
            </div>
         </div>
      </div>
   </div>
</form>

Input File

Para usar el input file es necesario usar el [data-title].El [data-title] sirve para cambiar el texto de la clase .form__file--name cuando haces click al input file pero no seleccionas un archivo, entonces cambia el texto de .form__file--name por el contenido de [data-title]

Seleccionar Archivo

<form>
   <div class="form__field">
      <div class="flex">
         <button class="btn bg--primary ripple" type="button">
            <input type="file" class="form__file" data-target="#photo" 
               data-toggle="file" data-title="Seleccionar Archivo" multiple>
            <span class="form__file--name" id="photo">Seleccionar Archivo</span>
         </button>                     
      </div>
   </div>
</form>

Input checkbox colors

<div class="row">
   <div class="col-sm-12">
      <div class="flex mr-5">
         <div class="form__container text-primary">
               <input type="checkbox" class="form__checkbox" checked>
               <div class="form__content checkbox"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Primary
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-secondary">
               <input type="checkbox" class="form__checkbox" checked>
               <div class="form__content checkbox"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Secondary
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-third">
               <input type="checkbox" class="form__checkbox" checked>
               <div class="form__content checkbox"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Third
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-info">
               <input type="checkbox" class="form__checkbox" checked>
               <div class="form__content checkbox"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Info
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-danger">
               <input type="checkbox" class="form__checkbox" checked>
               <div class="form__content checkbox"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Danger
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-warning">
               <input type="checkbox" class="form__checkbox" checked>
               <div class="form__content checkbox"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Warning
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-gray">
               <input type="checkbox" class="form__checkbox" checked>
               <div class="form__content checkbox"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Gray
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-success">
               <input type="checkbox" class="form__checkbox" checked>
               <div class="form__content checkbox"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Success
         </span>
      </div>
   </div>
</div>

Input radio colors

<div class="row">
   <div class="col-sm-12">
      <div class="flex mr-5">
         <div class="form__container text-primary">
               <input type="radio" class="form__radio" name="colors" checked>
               <div class="form__content radio"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Primary
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-secondary">
               <input type="radio" class="form__radio" name="colors">
               <div class="form__content radio"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Secondary
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-third">
               <input type="radio" class="form__radio" name="colors">
               <div class="form__content radio"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Third
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-info">
               <input type="radio" class="form__radio" name="colors">
               <div class="form__content radio"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Info
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-danger">
               <input type="radio" class="form__radio" name="colors">
               <div class="form__content radio"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Danger
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-warning">
               <input type="radio" class="form__radio" name="colors">
               <div class="form__content radio"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Warning
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-gray">
               <input type="radio" class="form__radio" name="colors">
               <div class="form__content radio"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Gray
         </span>
      </div>
      <div class="flex mr-5">
         <div class="form__container text-success">
               <input type="radio" class="form__radio" name="colors">
               <div class="form__content radio"></div>   
         </div>
         <span class="ml-2 mb-4 d-block">
            Success
         </span>
      </div>
   </div>
</div>