Search bar (Buscador)

Revisa y prueba el componente en código

Observa los componentes y sus propiedades para adaptarlos a tus necesidades específicas.

Búsqueda de contenido. Usa el bloque BEM .cl-searchbar del Kit Digital.

Básico

<div class="cl-searchbar">
  <div class="cl-searchbar__control">
    <span class="cl-searchbar__icon cl-icon" data-icon="search" aria-hidden="true"></span>
    <input class="cl-searchbar__input" type="search" aria-label="Buscar" placeholder="Buscar" />
  </div>
</div>

Con valor

<div class="cl-searchbar">
  <div class="cl-searchbar__control">
    <span class="cl-searchbar__icon cl-icon" data-icon="search" aria-hidden="true"></span>
    <input class="cl-searchbar__input" type="search" aria-label="Buscar" placeholder="Buscar" value="Subsidio eléctrico" />
  </div>
</div>

Deshabilitado

<div class="cl-searchbar cl-searchbar--disabled">
  <div class="cl-searchbar__control">
    <span class="cl-searchbar__icon cl-icon" data-icon="search" aria-hidden="true"></span>
    <input class="cl-searchbar__input" type="search" aria-label="Buscar" placeholder="Buscar" disabled />
  </div>
</div>