Logo Gobierno de España Logo DINTEL · Sistema de diseño Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Primeros pasos ¿Qué es DINTEL? Diseñadores Desarrolladores Recursos Preguntas frecuentes Fundamentos Fundamentos Color Tipografía Elevaciones Espaciado Retícula Borde Radio Iconografía Ilustraciones Animación Accesibilidad Tokens de diseño Contenidos digitales Visualización de datos Elementos de interfaz Elementos de interfaz Módulos Plantillas Componentes Actualizaciones Contacto
Elementos de interfaz Componentes Búsqueda

Búsqueda

La búsqueda permite a los usuarios especificar una palabra o frase para encontrar contenidos relevantes sin el uso de la navegación; es decir, una forma de explorar un sitio web o una aplicación utilizando palabras clave.

Se puede utilizar como el medio principal para descubrir contenido o como un filtro para ayudar al usuario a encontrar contenido.

Este tipo de buscador se utilizará dentro del contenido de la web, como pueda ser un Hero o en tablas.

Vista previa

Vista previa del componente búsqueda

Usos

Como usar

En listados con muchas columnas y contenido. En pantallas con mucha información. Para filtrar datos dentro de una tabla de datos. Se recomienda usar el placeholder text para guiar y sugerir al usuario qué consultas se pueden utilizar.

Como no usar

Cuando la pantalla tenga poca información.

Comportamiento

Acción

Visualización del componente búsqueda con borrado de contenido

Delete content

Tipo

Visualización del componente búsqueda sin botón

Without button

Visualización del componente búsqueda con botón

With button

Estados

Visualización del componente búsqueda en estado por defecto

Default

Visualización del componente búsqueda en estado rellenado

Filled

Visualización del componente búsqueda en estado enfocado

Focus

Visualización del componente búsqueda en estado deshabilitado

Disabled

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

El componente search esta formado por un input con role="searchbox". El componente search tiene tabindex="0" para hacer posible acceder a él usando la tecla de tabulación o mover el foco mediante programación. Cuenta con la propiedad aria-controls que identifica el elemento (o elementos) cuyo contenido o presencia están controlados por el elemento al que se asigna este atributo. En su versión advanced, cuenta cuenta con una serie de filtros, cuyo botón encargado de expandir o colapsar ese contenido tiene las propiedades aria-expanded y aria-collapse.

Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.

 Logo de Financiación por la Unión Europea NextGenerationEU Logo de Plan de Recuperación Transformación y Resiliencia Logo España digital Aviso legal Accesibilidad Política de Cookies Contacto Mapa web