Floating Labels

Floating labels help improve user experience by allowing the labels to float above input fields when focused or filled. This approach keeps the context clear while maintaining a clean interface.

Normal Input #

To create a floating label for a normal input field, wrap the input in a div with the form-floating class. The input should have a placeholder for better usability, and the label must correspond to the input's id.

                    

                        

                            
                            Email address
                        
                    
                    

                        
                        
HTML
                        
                    
                    <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInsdput">
    <label for="floatingInsdput" class="text-fields-color">Email address</label>
</div>    
                    
                

Disabled Input #

To create a floating label for a disabled input field, add the disabled attribute to the input. The label remains visible to indicate the field's purpose, but the input cannot be edited by the user.

                    

                        

                            
                            Email address
                        
                   
                     
                    

                        
                        
HTML
                        
                    
                    <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInsdput" placeholder="Example@gmail.com" disabled>
    <label for="floatingInsdput" class="text-fields-color">Email address</label>
</div>    
                    
                

Textarea #

Floating labels can also be used with textareas. Similar to input fields, wrap the textarea in a div with the form-floating class. The label should be associated with the textarea's id.

                    
                   
                        

                            
                            Comments
                        
                     
                    

                        
                        
HTML
                        
                    
                    <div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
    <label for="floatingTextarea">Comments</label>
</div>                              
                    
                

Accessibility #

Ensure that all input fields have corresponding labels for accessibility. The label should use the for attribute that matches the id of the input field to improve usability for screen readers and users with disabilities.

Conclusion #

The Floating Label component offers a modern and clean approach to form design. By keeping labels in view, it enhances usability and provides a better user experience while maintaining a minimalist aesthetic.