Cargador de archivos

Este componente permite al usuario seleccionar uno o más archivos para cargarlos en una ubicación concreta.

Vista Previa

Figma

Usos

Los componentes de carga se utilizan a menudo para permitir a los usuarios cargar archivos importantes, como documentos o imágenes, a un sitio web o aplicación.

Cuándo usar

Cuando se desea permitir a los usuarios cargar archivos desde su ordenador o dispositivo móvil: Los componentes de carga son la forma más conveniente de permitir a los usuarios cargar archivos desde su ordenador o dispositivo móvil.

Cuando se necesita una forma fácil y rápida de cargar archivos: Los componentes de carga ofrecen una forma fácil y rápida de cargar archivos, lo que puede ahorrar tiempo y esfuerzo.

Cuando se desea restringir el tipo de archivos que se pueden cargar: Los componentes de carga a menudo tienen opciones de configuración que permiten restringir el tipo de archivos que se pueden cargar, lo que puede ser útil para evitar la carga de archivos no deseados o no apropiados.

Cuándo no usar

Cuando no se desea permitir a los usuarios cargar archivos: Si no se desea permitir a los usuarios cargar archivos, no es necesario utilizar un componente de carga.

Cuando no se necesita cargar archivos: Si no se necesita cargar archivos, no es necesario utilizar un componente de carga.

Comportamiento

Estados

Visualización del componente cargador de archivos en estado por defecto

Default

Visualización del componente cargador de archivos en estado enfocado

Focus

Visualización del componente cargador de archivos en estado rellenado

Filled

Error

Visualización del componente cargador de archivos 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 File Uploader tiene tabindex=”0” para poder acceder a él.

Tiene la propiedad aria-label.

El label, cuando es obligatorio tiene la propiedad aria-required.