Metronic customizes the
										
Bootstrap Input Group   through the SASS variables in
										
src/sass/components/_variables.scssand adds additonal options for the form elements in
										
src/sass/components/forms/.
 
									
									
									
										
										
										 
										
										
										Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place
										<label>outside the input group.
										
										
										
										
										
										
											
											
												copy 
												
													
<!--begin::Input group-->
<div class="input-group mb-5">
    <span class="input-group-text" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group mb-5">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
    <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-5">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group mb-5">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"/>
    <span class="input-group-text">.00</span>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group mb-5">
    <input type="text" class="form-control" placeholder="Username" aria-label="Username"/>
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Server" aria-label="Server"/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group">
    <span class="input-group-text">With textarea</span>
    <textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<!--end::Input group-->
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Add
										.input-group-solidcustom class to use solid style input group:
										
										
										
										
										
										
											
											
												copy 
												
													
<!--begin::Input group-->
<div class="input-group input-group-solid mb-5">
    <span class="input-group-text" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group input-group-solid mb-5">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
    <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group input-group-solid mb-5">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group input-group-solid mb-5">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"/>
    <span class="input-group-text">.00</span>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group input-group-solid mb-5">
    <input type="text" class="form-control" placeholder="Username" aria-label="Username"/>
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Server" aria-label="Server"/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group input-group-solid">
    <span class="input-group-text">With textarea</span>
    <textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<!--end::Input group-->
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Add the relative form sizing classes to the
										.input-groupitself and contents within will automatically resize—no need for repeating the form control size classes on each element.
										
										
										
										
										
										
											
											
												copy 
												
													
<!--begin::Input group-->
<div class="input-group input-group-sm mb-5">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
    <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group mb-5">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
    <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group input-group-lg">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
    <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
</div>
<!--end::Input group-->
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										
										
										
										
										
										
										
											
											
												copy 
												
													
<!--begin::Input group-->
<div class="input-group mb-5">
    <span class="input-group-text" id="basic-addon1">
        <!--begin::Svg Icon | path: icons/duotune/communication/com006.svg-->
        <span class="svg-icon svg-icon-3x">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            ....
            </svg>
        </span>
        <!--end::Svg Icon-->
    </span>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group mb-5">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
    <span class="input-group-text" id="basic-addon2">
        <i class="fas fa-envelope-open-text fs-4"></i>
    </span>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group mb-5">
    <span class="input-group-text" id="basic-addon3">
        <i class="las la-wallet fs-1"></i>
    </span>
    <input type="text" class="form-control" id="basic-url"  placeholder="Website URL" aria-describedby="basic-addon3"/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="input-group mb-5">
    <span class="input-group-text"><i class="bi bi-graph-down fs-2"></i></span>
    <input type="text" class="form-control" placeholder="Amount (to the nearest dollar)"/>
    <span class="input-group-text">.00</span>
</div>
<!--end::Input group-->