DIANA

Diseño Aplicaciones Navarra

Searchbar

Componente de búsqueda compuesto por campo de texto y botón, con foco independiente por control.

Estado: review

1. Búsqueda con botón (Default)

El componente compone gn-input y gn-button en una única barra de búsqueda.

Mostrar HTML 
<form class="gn-searchbar gn-searchbar--default" role="search" aria-label="Búsqueda global">
  <div class="gn-searchbar__input">
    <div class="gn-input">
      <input type="search" class="gn-input__control" placeholder="Buscar en este sitio" aria-label="Buscar en este sitio" />
    </div>
  </div>
  <button type="submit" class="gn-button gn-button--primary gn-button--md gn-searchbar__button">Buscar</button>
</form>

2. Foco independiente por control

El foco se resuelve en cada control nativo (input y button) sin halo de conjunto en .gn-searchbar.

Mostrar HTML 
<form class="gn-searchbar gn-searchbar--default" role="search" aria-label="Búsqueda global con foco independiente">
  <div class="gn-searchbar__input">
    <div class="gn-input">
      <input type="search" class="gn-input__control" placeholder="Buscar en este sitio" aria-label="Buscar en este sitio" />
    </div>
  </div>
  <button type="submit" class="gn-button gn-button--primary gn-button--md gn-searchbar__button">Buscar</button>
</form>

3. Tamaño SM (Small)

Aplicando el modificador .gn-searchbar--sm al contenedor principal.

Mostrar HTML 
<form class="gn-searchbar gn-searchbar--sm" role="search" aria-label="Búsqueda rápida">
  <div class="gn-searchbar__input">
    <div class="gn-input gn-input--sm">
      <input type="search" class="gn-input__control" placeholder="Buscar en este sitio" aria-label="Buscar en este sitio" />
    </div>
  </div>
  <button type="submit" class="gn-button gn-button--primary gn-button--sm gn-searchbar__button">Buscar</button>
</form>

4. Variante sin botón (solo input con icono)

Usa el modificador .gn-input--icon-search del componente input.

Mostrar HTML 
<form class="gn-searchbar gn-searchbar--sm gn-searchbar--input-only" role="search" aria-label="Filtrado rápido">
  <div class="gn-searchbar__input">
    <div class="gn-input gn-input--sm gn-input--icon-search">
      <input type="search" class="gn-input__control" placeholder="Buscar en este sitio" aria-label="Buscar en este sitio" />
    </div>
  </div>
</form>

5. Estado deshabilitado (Disabled)

La semántica deshabilitada recae sobre los campos interactivos nativos.

Mostrar HTML 
<form class="gn-searchbar gn-searchbar--default" role="search" aria-label="Búsqueda inactiva">
  <div class="gn-searchbar__input">
    <div class="gn-input">
      <input type="search" class="gn-input__control" placeholder="Valor" aria-label="Búsqueda inactiva" disabled />
    </div>
  </div>
  <button type="submit" class="gn-button gn-button--primary gn-button--md gn-searchbar__button" disabled>Buscar</button>
</form>