File input

The file input component lets the user select a file that will be attached as part of a form submission. The accept attribute to defines the file types the control can select.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Forms

Demo

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


Consider using file input when:


    

  • users are expected to submit their own content in a specified file format




    






                
                    





    
    
    


Usage examples:


    

  • upload profile image

  • submit application




    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Ensure date input control is large enough for mouse clicking and finger pressing.



    





Ensure labels and instructions are clear and easy to understand. Include assistive descriptions, such file size or format limitations, to help the user make an informed selection.



    





Give feedback on file upload status, such as the name of the file that has been successfully uploaded.



    





Provide validation to help the user recover from uploading an incorrect file.