Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    File Uploader

    File uploader allows users to select one or more files to upload to a specific location.

    Overview

    A file uploader allows users to upload and attach one or more files. It shows the upload progress and status of each file. 

    Formatting

    Anatomy

    Accordion anatomy diagram
    1. Title
    2. Helper text
    3. Button: icon is "ri-upload-line"
    4. File container
    5. File name
    6. Close icon: Deletes the uploaded file

    Behavior

    Loading States

    A file that is being uploaded has three distinct states—loading, success, and uploaded.

    Accordion anatomy diagram

    Interactions

    Mouse

    To remove an uploaded file, click the “x” (or delete) icon.

    Accordion anatomy diagram

    Keyboard

    Upload button:
    • The file uploader button or drop zone can be activated by pressing Space or Enter.
    • After the file selection dialog closes, focus should retain the user’s point of regard and return to the element that invoked it.
    Uploaded file:
    • Pressing Tab shifts focus to the “x” icon.
    • Pressing Space or Enter while the “x” icon is in focus will delete the file.

    Validation

    When a specific file cannot be uploaded successfully it will show an error state. We have an option for a single-line or multi-line error state depending on how descriptive the message needs to be. Error messages should provide clear guidance to help the user resolve the error.

    Accordion anatomy diagram