Links

Filter Tag

Las filter tags son elementos atómicos que representan un filtrado o propiedad concreta y pueden ser eliminadas en cualquier momento.

Racional de aplicación

Las filter tags son átomos intrínsecos a ciertos componentes de filtrado como los multi-select. Aparecen de forma instantánea cuando se realiza la acción de seleccionar una o más propiedades a la hora de filtrar una búsqueda.
Es una buena práctica no utilizar filter tags de forma independiente ya que carecen de entidad y funcionalidad suficiente.

Buenas prácticas

Uso correcto
Uso incorrecto
La etiqueta siempre ha de ir acompañada por un icono de acción para eliminar la propiedad.
No debemos utilizar filter tags que no puedan ser eliminadas.

Interacción

Este componente ha sido validado para cumplir con las pautas de accesibilidad WCAG 2.1 AA, sin embargo los cambios realizados por el propietario del contenido pueden afectar el cumplimiento de la accesibilidad. Hay que asegurarse de revisar y seguir las instrucciones de esta sección cuando se actualice o se agregue contenido nuevo a este componente.
Dispositivo
Interacción
Ratón
Se puede eliminar una filter tag haciendo clic en el icono de cerrar (x).
Teclado
Se puede eliminar un filter tag presionando Intro o Espacio mientras el icono de cerrar está enfocado. Se puede enfocar el icono de cerrar (x) mediante el Tabulador.

Anatomía y variabilidad

Anatomía del componente

Letra
Elemento
Descripción
A
Etiqueta
Texto que informa de la propiedad que está ejerciendo de filtro.
B
Icono de ayuda
Icono de acción para eliminar la propiedad que está ejerciendo de filtro.

Variabilidad de estados

Letra
Estado
Descripción
A
Default
Estado por defecto, el selector está disponible para elegir la opción.
B
Hover
Visible al posicionar el cursor del ratón encima del selector.
Última actualización 1yr ago