Índice de apartados de esta página
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.
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.
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’.