Material Dashboard
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
<div class="input-group input-group-dynamic mb-4"> <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> <div class="input-group input-group-dynamic mb-4"> <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> <div class="input-group input-group-dynamic mb-4"> <label class="form-label" for="basic-url">Your vanity URL</label> <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" onfocus="focused(this)" onfocusout="defocused(this)"> </div> <div class="input-group input-group-dynamic mb-4"> <span class="input-group-text">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> </div>
<div class="input-group input-group-lg input-group-outline my-3"> <label class="form-label">Large</label> <input type="text" class="form-control form-control-lg"> </div> <div class="input-group input-group-outline my-3"> <label class="form-label">Default</label> <input type="text" class="form-control"> </div> <div class="input-group input-group-sm input-group-outline my-3"> <label class="form-label">Small</label> <input type="text" class="form-control form-control-sm"> </div>