Input Group

Overview #

The Input Group component is used to combine text inputs with buttons, dropdowns, or other elements in a flexible and customizable way.

Example #

Here is an example of the Input Group:

    

        

            

                @
                
            
        
    
    

        
        
HTML
        
    
    <div class="d-flex flex-column justify-content-center align-items-start h-100">
    <div class="mb-3 input-group flex-row">
        <label for="exampleFormControlInput1" class="form-label">@</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
    </div>
</div>

Usage #

To create an input group, use the input-group class to wrap the input and any other elements you want to include, such as labels, buttons, or dropdowns.

    

        

            

                @
                
                    Choose...
                    Option 1
                    Option 2
                
            
        
    
    

        
        
HTML
        
    
    <div class="input-group flex-row mb-3">
    <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>

Classes #

Here are the classes available for the Input Group component:

Options #

Input Groups can be customized with various elements such as icons, buttons, or dropdowns. Add these elements within the input-group container.

Accessibility #

Ensure that all inputs and elements within the Input Group are properly labeled for screen readers using aria-label or aria-labelledby.

More Examples #

Here are more examples showcasing how to use Input Groups:

    

        

            

                %
                
                Submit
            
        
    
    

        
        
HTML
        
    
    <div class="input-group flex-row mb-3">
    <label for="exampleFormControlInput1" class="form-label">%</label>
    <input type="number" class="form-control" id="exampleFormControlInput1" placeholder="Enter percentage">
    <button class="btn btn-primary">Submit</button>
</div>