DESY

Sistema de Diseño del Gobierno de Aragón.

Barra de búsqueda

Consiste en una caja que permite introducir texto. Este componente se emplea para que el usuario pueda realizar búsquedas de contenido en el sitio web o en una vista.

Índice de apartados de esta página

Variantes

Con botón

La barra de búsqueda con botón está compuesta por una caja de texto y un botón con la acción Buscar a su derecha. Este botón puede ser uno primario o secundario según si la acción de buscar es principal o no.

Compacta

La barra de búsqueda en su versión compacta está compuesta siempre por una caja de texto y un botón-icono (una lupa) alineado a la derecha, integrado dentro de la propia caja. También debe contar con un texto que indique la función del elemento de búsqueda Buscar por ejemplo), que puede colocarse como label o como placeholder, según el espacio disponible para la barra de búsqueda.

Tamaños

Por defecto

Utilizar para cualquier tipo de situaciones y layouts. Siempre que sea posible se recomienda usar este tamaño por motivos de accesibilidad.

Pequeño

Cumplen la misma función que los de tamaño estándar, pero están dirigidos a su uso en pop-ups y otros elementos de la página que no ocupen el ancho completo de la misma, así como contenido menos relevante.

Accesibilidad

Cómo funciona

El componente es un <input> con type=search. Lleva un <label> y un <button> con type=submit para realizar la búsqueda.

El <label> está oculto visualmente por defecto, utiliza la clase .not-sr-only para mostrarlo.

Qué tener en cuenta
Qué usar Dónde Función
id Parámetro Nunjucks dentro del componente Permite las llamadas entre label, hint, error y el input. Debe ser único.

Buenas prácticas

  • Por lo general, no se recomienda que las barras de búsqueda ocupen todo el ancho de la página en versión desktop.
  • Al mostrar los resultados de búsqueda, se recomienda que se mantenga el texto que ha introducido el usuario en la barra de búsqueda.
  • Se recomienda que el placeholder haga referencia a lo que se va a buscar. Por ejemplo, si se trata de un buscador de personas `Buscar por nombre, apellidos o DNI’.