Floating Labels

The Floating Labels component enhances form usability by keeping the label visible above the field when the input is focused or filled. This approach maintains a clean and clear interface for users, improving accessibility and user experience.

Description #

The Floating Labels component provides a modern form field style where the label floats above the input or textarea when it is focused, filled, disabled, or read-only. It supports both input and textarea elements, and adapts to various states (focus, filled, disabled, read-only) automatically. The component is fully customizable via SCSS variables and utility classes.

• Works with input and textarea elements

• Label floats on focus, filled, disabled, or read-only states

• Customizable spacing, scale, and transition via SCSS

• No JavaScript required

Examples and Classes #

Basic Example

            

                

                    
                    Email address
                
            
            

                
                
HTML
                
            
            <div class="form-floating">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
    <label for="floatingInput" class="text-fields-color">Email address</label>
</div>

Textarea Example

            

                

                    
                    Comments
                
            
            

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

Disabled Input Example

            

                

                    
                    Email address
                
            
                

                    
                    
HTML
                    
                
            <div class="form-floating">
    <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name@example.com" readonly>
    <label for="floatingInputDisabled" class="text-fields-color">Email address</label>
</div>

Available Classes

Class	Description
.form-floating	Main wrapper for floating label effect
.form-control	Styles for input and textarea

Layout Variations

The Floating Labels component supports the following layout variations:

• Input Field: Standard input with floating label
• Textarea Field: Textarea with floating label
• Disabled/Read-only: Label floats for disabled or read-only fields

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/floating-labels/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/floating-labels/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/floating-labels/script.js	JavaScript functionality (currently not required)

SCSS Variables #

            

                
                
SCSS
                
            
            $floating-label-transition: 0.2s linear;
$floating-label-form-control-space: 10px;
$floating-label-space-left: 10px;
$floating-label-scale: 0.7;
$floating-label-placeholder-opacity: 0.7;
        

Also uses get-color() for color values and @extend for base utility classes.

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
-	-	No JavaScript is required for this component. All functionality is handled via CSS.