Componentes

Formularios

Elementos de entrada de datos. Siempre accesibles con <label> asociado y mensajes de error descriptivos.

Campos de texto

Use su correo institucional.
HTML — Campos de texto 
<div class="form-group">
  <label class="form-label" for="nombre">
    Nombre completo
    <span class="required" aria-hidden="true">*</span>
    <span class="sr-only">(obligatorio)</span>
  </label>
  <input class="form-control"
         type="text" id="nombre"
         placeholder="Ej: Ana García"
         autocomplete="name"
         required>
  <span class="form-text">Texto de ayuda opcional.</span>
</div>

Estados de validación

✓ Correo verificado correctamente.
⚠ El formato del correo no es válido.
HTML — Validación de campos 
<!-- Campo válido -->
<input class="form-control is-valid"
       type="email" id="correo">
<span class="form-text valid">✓ Verificado.</span>

<!-- Campo inválido -->
<input class="form-control is-invalid"
       type="email" id="correo2"
       aria-describedby="correo2-error">
<span class="form-text invalid"
      id="correo2-error"
      role="alert">
  ⚠ El formato no es válido.
</span>

Selects y Textarea

HTML — Select y Textarea 
<label class="form-label" for="facultad">Facultad</label>
<select class="form-control" id="facultad" required>
  <option value="">Seleccione una facultad</option>
  <option>Ingeniería</option>
  <option>Ciencias Naturales</option>
</select>

<label class="form-label" for="msg">Mensaje</label>
<textarea class="form-control"
           id="msg" rows="4"></textarea>

Checkboxes y Radio buttons

Intereses
Tipo de usuario
HTML — Checkboxes y radio buttons 
<fieldset>
  <legend>Tipo de usuario</legend>

  <div class="form-check">
    <input type="radio" name="tipo"
           id="estudiante" value="estudiante">
    <label class="form-check-label"
           for="estudiante">Estudiante</label>
  </div>

  <div class="form-check">
    <input type="checkbox"
           id="acepto">
    <label class="form-check-label"
           for="acepto">Acepto los términos</label>
  </div>
</fieldset>

Formulario completo

HTML — Estructura de formulario completo 
<form>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label" for="nombre">Nombre</label>
      <input class="form-control" type="text" id="nombre">
    </div>
    <div class="form-group">
      <label class="form-label" for="apellido">Apellido</label>
      <input class="form-control" type="text" id="apellido">
    </div>
  </div>

  <div class="form-group">
    <label class="form-label" for="correo">Correo</label>
    <input class="form-control" type="email" id="correo">
  </div>

  <button type="submit" class="btn btn-marca">Enviar</button>
</form>