Input Group

The Input Group component allows you to combine input fields with labels, buttons, dropdowns, icons, and other elements in a single, flexible container. It is ideal for building complex form layouts and interactive input areas.

Description #

Input groups are used to group related form controls and elements together. You can use them to prepend or append content, add buttons, dropdowns, icons, or even combine multiple inputs in a single line. The .input-group class is the main wrapper, and you can use .form-control, .form-label, .form-select, .btn, and other elements inside it.

• Combine text inputs, selects, buttons, dropdowns, icons, and more
• Supports horizontal and vertical layouts
• Customizable border radius and spacing
• Works with all form-control sizes and states

Examples and Classes #

Basic Example

            

                

                    @
                    
                
            
            

        
        
HTML
        
    
            <div class="input-group">
    <label for="exampleInput1" class="form-label">@</label>
    <input type="email" class="form-control" id="exampleInput1" placeholder="name@example.com">
</div>

Other Examples

            

                

                @
                
                    Choose...
                    Option 1
                    Option 2
                
            
        
            

        
        
HTML
        
    
            <div class="input-group">
    <label for="inputGroupSelect" class="form-label">@</label>
    <select class="form-select" id="inputGroupSelect">
        <option selected>Choose...</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>

            

                

                    $
                    
                    0.00
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <label for="exampleInput2" class="form-label">$</label>
    <input type="text" class="form-control" id="exampleInput2">
    <label for="exampleInput2" class="form-label">0.00</label>
</div>

            

                

                    
                    @
                    
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <input type="text" class="form-control" id="exampleInput3">
    <label for="exampleInput3" class="form-label">@</label>
    <input type="text" class="form-control" id="exampleInput3">
</div>

            

                

                    Example textarea
                    
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <label for="exampleInput4" class="form-label">Example textarea</label>
    <textarea id="exampleInput4" class="form-control"></textarea>
</div>

            

                

                    
                    
                    
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <label for="exampleInput5" class="form-label"><input type="checkbox"></label>
    <input type="text" class="form-control" id="exampleInput5">
    <label for="exampleInput5" class="form-label"><input type="radio"></label>
</div>

            

                

                    First and last name
                    
                    
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <label for="exampleInput6" class="form-label">First and last name</label>
    <input type="text" class="form-control" id="exampleInput6">
    <input type="text" class="form-control" id="exampleInput6">
</div>

            

                

                    warning
                    
                    Primary
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <button type="button" class="btn btn-warning border-solid border-color border-width-1">warning</button>
    <input type="text" class="form-control" id="exampleInput8">
    <button type="button" class="btn btn-primary border-solid border-color border-width-1">Primary</button>
</div>

            

                

                    

                        
Dropdown 
                        

                            
Item 1
                            
Item 2
                        
                    
                    
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <div class="dropdown dropdown-bottom">
        <div class="dropdown-box">Dropdown <i class="fa-solid fa-chevron-down"></i></div>
        <ul class="dropdown-menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
        </ul>
    </div>
    <input type="text" class="form-control" id="exampleInput9">
</div>

            

                

                    
                        Open this select menu
                        One
                        Two
                        Three
                    
                    select
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <select class="form-select">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <span>select</span>
</div>

            

                

                    select
                    
                        Open this select menu
                        One
                        Two
                        Three
                    
                    span
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <span>select</span>
    <select class="form-select">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <span>span</span>
</div>

            

                

                    btn
                    
                        Open this select menu
                        One
                        Two
                        Three
                    
                    btn
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <button class="btn bg-on-primary-color px-2 py-1 border-solid border-width-1 border-color">btn</button>
    <select class="form-select border-solid border-width-1 border-color">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <button class="btn btn-secondary border-solid border-color border-width-1 on-primary-color">btn</button>
</div>

            

                

                    btn
                    
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <button class="btn btn-secondary border-solid border-color border-width-1 on-primary-color">btn</button>
    <input class="form-control" type="file" id="formFile1">
</div>

            

                

                    btn
                    
                    
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <button class="btn btn-secondary border-solid border-color border-width-1 on-primary-color">btn</button>
    <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
    <datalist id="datalistOptions">
        <option value="San Francisco">
        <option value="New York">
        <option value="Seattle">
        <option value="Los Angeles">
        <option value="Chicago">
    </datalist>
</div>

            

                

                    
                    
                
            
            

                
                
HTML
                
            
            <div class="input-group">
    <label for="userName"><i class="fa-solid fa-user on-primary-color"></i></label>
    <input id="userName" class="form-control" type="text" placeholder="name">
</div>

Available Classes

Class	Description
.input-group	Main wrapper for input group elements. Controls layout and spacing.
.form-label	Label for input fields inside the group.
.form-control	Styles the input fields inside the group.
.form-select	Styles the select dropdown inside the group.

Layout Variations

Input groups can be arranged in horizontal (default) or vertical layouts. You can also combine multiple fields, add icons, or use different input types and sizes for a custom experience.

• Horizontal Layout: Default, all elements in a row
• Vertical Layout: Stack input groups using .flex-column
• Grouped Fields: Nest multiple .input-group inside a parent for grouped forms
• Helper Text: Add .form-text for descriptions or hints

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/input-group/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/input-group/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/input-group/script.js	JavaScript functionality (if needed)

SCSS Variables #

            

        
                
SCSS
        
    
            $input-group-items-border-class: ".radius-all-small";
$input-group-label-custom-classes: ".border-color, .bw-1, .border-style-solid, .p-1";

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
-	-	No JavaScript required for basic usage. All functionality is handled by HTML and CSS. You may add custom JS for validation or interactivity as needed.