Searchbar

# Searchbar Pattern

El Searchbar es un patrón de diseño (*pattern*) que une lógicamente y visualmente un campo de texto de búsqueda y un botón de ejecución de acción, creando un bloque funcional consolidado para buscar contenidos dentro de una aplicación o sitio web.

¿Por qué es un Pattern?

No es un componente base porque reutiliza conceptualmente y estructuralmente piezas que ya existen en el sistema (text-input y button). La aportación de este patrón no es construir un control nuevo desde cero, sino definir la regla de ensamblaje de esos dos controles: cómo se posicionan, cómo se espacian y, muy especialmente, cómo reacciona el halo de accesibilidad al interactuar con ellos.

Cuándo usarlo

- Para barras de búsqueda globales en cabeceras (*headers*). - Para filtros de búsqueda sobre listados o tablas. - En vistas donde la búsqueda es el punto de entrada principal del usuario (ej. un portal de soporte).

Cuándo no usarlo

- Para campos de formularios genéricos (utiliza text-input en su lugar). - Si necesitas un filtrado multivariable complejo (en ese caso es preferible un *Filter bar* estructurado).

Comportamiento del Focus

El estado interactivo de *Focus* es la característica fundamental de este patrón. Cuando el usuario navega por teclado o hace clic tanto dentro del campo de texto como en el botón, todo el conjunto (el contenedor .searchbar) se ilumina con el estado de foco del sistema.

Técnicamente se resuelve usando :focus-within en el contenedor padre .searchbar y suprimiendo visualmente los anillos de foco individuales de sus descendientes (gn-input y gn-button). Esto crea la ilusión óptica mostrada en Figma de que "el bloque entero es un solo control" sin romper la semántica nativa interactiva.

Consideraciones de Accesibilidad

- Semántica: Se recomienda que el wrapper sea un elemento de formulario <form role="search"> si realiza recarga de página, o disponer de un role="search" en su contenedor semántico más cercano. - Labels: El campo <input type="search"> debe contar siempre con un aria-label descriptivo (ej. "Buscar en este sitio"). El atributo placeholder nunca debe ser el único sustituto del label para un lector de pantalla. - Botón: El botón debe tener texto real visible y el atributo type correcto (type="submit" para búsquedas nativas, type="button" si es manipulado por JS).

Variantes

- Default: Campo de texto + Botón (Alto base de 53px). - SM (Small): Campo de texto + Botón (Alto reducido a 35px) aplicable usando .searchbar--sm. - Sin Botón: Únicamente el campo de texto pero incorporando el icono de la lupa a través del propio componente base (gn-input__icon). Mantiene el mismo enfoque de layout y foco estructural que el patrón completo.

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