Text input

Text input field lets users enter and edit short-form content and data. This input does not support line-breaks or text formatting.

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

Configure: select the dropdowns below to display the variety of options that a text input supports.

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


Consider using text input when:


    

  • users are expected to input text no longer than a single line

  • the input from the users cannot be easily predicted




    






                
                    





    
    
    


Usage examples:


    

  • area to answer a security question

  • address field



Related components:




    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Align text input label with the input field and ensure it is always visible.



    





Ensure the size of the text input box reflects the amount of the content user is expected to enter.



    





Ensure labels and descriptions are clear and easy to understand.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not use placeholder text instead of labels.