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>
<div class="form-label-container">
<label for="search" class="form-label">Ejemplo Buscador</label>
</div>
<div class='search-container'>
<input type="search" class="form-control input-search" id="search" placeholder="Buscar..." />
<button class="reset" type="reset" aria-label="Borrar"></button>
</div>
</form>
Buscador con botón
<form>
<div class="form-label-container">
<label for="search-btn" class="form-label">Ejemplo Buscador con botón</label>
</div>
<div class='search-container'>
<input type="search" class="form-control input-search input-search-with-button" id="search-btn" placeholder="Buscar..." />
<button class="reset" type="reset" aria-label="Borrar"></button>
<button class="button-search" type="submit" aria-label="Buscar"></button>
</div>
</form>
Deshabilitado
<form>
<div class="form-label-container">
<label for="search-btn" class="form-label disabled">Ejemplo Buscador deshabilitado</label>
</div>
<div class='search-container'>
<input type="search" class="form-control input-search input-search-with-button" id="search-btn" placeholder="Buscar..." disabled />
<button class="reset" type="reset" aria-label="Borrar"></button>
</div>
</form>