Input Group

  1. Forms
  2. Form Elements
  3. Input Group

Request details

Add the customer and payment information.

#
$ .00 
<div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="customer-name" class="form-label">Customer name</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="ri-user-line" aria-hidden="true"></i></span>
                                            <input type="text" class="form-control" id="customer-name" placeholder="Name or company">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="customer-email" class="form-label">Email address</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="ri-mail-line" aria-hidden="true"></i></span>
                                            <input type="email" class="form-control" id="customer-email" placeholder="customer@example.com">
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <label for="request-title" class="form-label">Request title</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="ri-file-text-line" aria-hidden="true"></i></span>
                                            <input type="text" class="form-control" id="request-title" placeholder="e.g. Website design milestone">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="request-reference" class="form-label">Reference</label>
                                        <div class="input-group">
                                            <span class="input-group-text">#</span>
                                            <input type="text" class="form-control" id="request-reference" value="PR-2048">
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <label for="request-amount" class="form-label">Amount due</label>
                                        <div class="input-group">
                                            <select class="form-select flex-grow-0 w-auto" aria-label="Select currency">
                                                <option selected>USD</option>
                                                <option>EUR</option>
                                                <option>GBP</option>
                                            </select>
                                            <span class="input-group-text">$</span>
                                            <input type="number" class="form-control" id="request-amount" placeholder="0.00" min="0" step="0.01">
                                            <span class="input-group-text">.00</span>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <label for="due-date" class="form-label">Due date</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="ri-calendar-line" aria-hidden="true"></i></span>
                                            <input type="date" class="form-control" id="due-date">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label for="request-note" class="form-label">Note to customer</label>
                                        <div class="input-group">
                                            <span class="input-group-text align-items-start pt-2"><i class="ri-sticky-note-line" aria-hidden="true"></i></span>
                                            <textarea class="form-control" id="request-note" rows="3" placeholder="Add details about the work or payment terms"></textarea>
                                        </div>
                                    </div>
                                </div>

Line item and adjustments

Break down the work and any applied discount or tax.

Service
unit
$
%
PO- 
<div class="row g-3">
                                    <div class="col-12">
                                        <label for="line-item-name" class="form-label">Item description</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="ri-briefcase-line" aria-hidden="true"></i></span>
                                            <input type="text" class="form-control" id="line-item-name" value="Product design services">
                                            <span class="input-group-text">Service</span>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="line-item-quantity" class="form-label">Quantity</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="line-item-quantity" value="1" min="1">
                                            <span class="input-group-text">unit</span>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="line-item-rate" class="form-label">Unit price</label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" class="form-control" id="line-item-rate" placeholder="0.00" min="0" step="0.01">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="line-item-tax" class="form-label">Tax rate</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="line-item-tax" placeholder="0" min="0" max="100">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <label for="discount-code" class="form-label">Discount code</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="ri-coupon-3-line" aria-hidden="true"></i></span>
                                            <input type="text" class="form-control" id="discount-code" placeholder="Enter code">
                                            <button class="btn btn-light" type="button">Apply</button>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <label for="purchase-order" class="form-label">Purchase order</label>
                                        <div class="input-group">
                                            <span class="input-group-text">PO-</span>
                                            <input type="text" class="form-control" id="purchase-order" placeholder="Reference">
                                        </div>
                                    </div>
                                </div>

Billing contact

Add contact details for the payment record. 

<div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="billing-company" class="form-label">Company</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="ri-building-line" aria-hidden="true"></i></span>
                                            <input type="text" class="form-control" id="billing-company" placeholder="Company name">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="billing-phone" class="form-label">Phone number</label>
                                        <div class="input-group">
                                            <select class="form-select flex-grow-0 w-auto" aria-label="Phone country code">
                                                <option selected>+1</option>
                                                <option>+44</option>
                                                <option>+61</option>
                                            </select>
                                            <input type="tel" class="form-control" id="billing-phone" placeholder="555 0100">
                                        </div>
                                    </div>
                                </div>

Delivery options

Choose how the request is delivered.

pay.example.com/ 
<div class="row g-3">
                                    <div class="col-lg-6">
                                        <div class="input-group">
                                            <span class="input-group-text"><input class="form-check-input mt-0" type="checkbox" id="send-email" checked aria-label="Send email copy"></span>
                                            <input type="text" class="form-control" value="Email a copy to the customer" aria-label="Email delivery option" readonly>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="input-group">
                                            <span class="input-group-text"><input class="form-check-input mt-0" type="checkbox" id="send-reminder" checked aria-label="Send due date reminder"></span>
                                            <input type="text" class="form-control" value="Send a reminder before due date" aria-label="Reminder option" readonly>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label for="payment-link" class="form-label">Payment link preview</label>
                                        <div class="input-group">
                                            <span class="input-group-text">pay.example.com/</span>
                                            <input type="text" class="form-control" id="payment-link" value="request/PR-2048" readonly>
                                            <button type="button" class="btn btn-outline-light">Copy link</button>
                                        </div>
                                    </div>
                                </div>

Payment settings

INV- 
<label for="payment-category" class="form-label">Category</label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="ri-price-tag-3-line" aria-hidden="true"></i></span>
                                    <select class="form-select" id="payment-category">
                                        <option selected>Select category</option>
                                        <option>Services</option>
                                        <option>Subscription</option>
                                        <option>Consulting</option>
                                    </select>
                                </div>
                                <label for="invoice-code" class="form-label">Internal invoice code</label>
                                <div class="input-group">
                                    <span class="input-group-text">INV-</span>
                                    <input type="text" class="form-control" id="invoice-code" placeholder="0000">
                                </div>