Estilos

Componentes

Formularios

Organismos

Buscador

Los campos de búsqueda llevan siempre un placeholder que anticipe y ayude al usuario a saber qué información podrá encontrar en el buscador.

Buscador


  <form>
    <label for="search" class="form-label">Ejemplo Buscador</label>
    <div class='search-container'>
      <input type="search" class="form-control input-search" id="search" placeholder="Buscador" />
      <button class="reset" type="reset" aria-label="Borrar"></button>
    </div>
  </form>

Buscador con botón


  <form>
    <label for="search-btn" class="form-label">Ejemplo Buscador con botón</label>
    <div class='search-container'>
      <input type="search" class="form-control input-search input-search-with-button" id="search-btn" placeholder="Buscador" />
      <button class="reset" type="reset" aria-label="Borrar"></button>
      <button class="button-search" type="submit" aria-label="Buscar"></button>
    </div>
  </form>

Deshabilitado


  <form>
    <label for="search-btn" class="form-label">Ejemplo Buscador deshabilitado</label>
    <div class='search-container'>
      <input type="search" class="form-control input-search input-search-with-button" id="search-btn" placeholder="Buscador" disabled />
      <button class="reset" type="reset" aria-label="Borrar"></button>
    </div>
  </form>