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
• Tamaños
• Accesibilidad
• Buenas prácticas

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.

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’.