Tipo 01
Barra de búsqueda
Siempre visible, con forma de píldora.
Componentes Búsqueda
Búsqueda
La búsqueda permite encontrar contenido escribiendo. Tiene dos partes: la barra de búsqueda, siempre visible, y la vista de búsqueda, que se abre con sugerencias.
Uso
Úsala cuando hay mucho contenido y el usuario sabe lo que busca.
- Catálogos, listas largas, ayuda
- Encontrar por nombre
- Pocos elementos que se ven todos
- Filtros por categoría: usa chips
Principios
1
Visible
La barra está arriba y se reconoce por la lupa.
2
Rápida
Sugerencias mientras se escribe.
3
Tolerante
Encuentra aunque falten tildes o mayúsculas.
Tipos
pow
Tipo 02
Vista de búsqueda
Se abre al tocar la barra; muestra sugerencias e historial.
Anatomía
- Contenedor (píldora)
- Ícono de búsqueda
- Texto de sugerencia
- Avatar o acción final
Comportamiento
- Al enfocar la barra, se abre la lista de sugerencias.
- Las sugerencias se filtran con cada letra.
- Esc o el ícono de volver cierran la vista.
Medidas
| Medida | Valor de referencia |
|---|---|
| Alto de la barra | 56 dp |
| Forma | completa (píldora) |
| Ícono | 24 dp |
| Margen interno | 16 dp |
| Elementos de la lista | 56 dp |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Etiqueta
con label o aria-label.
Resultados
Anuncia la cantidad con aria-live: "3 resultados".
Formulario
Envuelve en