Number Inputs

Bootstrap 5 Number Inputs component

Responsive Number Inputs built with Bootstrap 5. Input fields refer specifically to the number input fields, which are used to obtain data from the users.

Basic example

A basic example of the number input field consists of the input element with a specified ID and label element connected via this ID with the input. Both elements are wrapped in .form-outline class which provides a material design look. The input type="number" defines the field for entering a number.

Edit in sandbox 
        
            
                <div data-mdb-input-init class="form-outline">
                    <input type="number" id="typeNumber" class="form-control" />
                    <label class="form-label" for="typeNumber">Number input</label>
                </div>

Phone number

The input type="tel" defines a field for entering a telephone number.

Edit in sandbox 
        
            
                <div data-mdb-input-init class="form-outline">
                    <input type="tel" id="typePhone" class="form-control" />
                    <label class="form-label" for="typePhone">Phone number input</label>
                </div>

Minimum and maximum

The input min=" " or max=" " defines a field for minimum or maximum value.

Edit in sandbox 
        
            
                <div data-mdb-input-init class="form-outline" style="width: 22rem;">
                    <input min="10" max="20" type="number" id="typeNumber" class="form-control" />
                    <label class="form-label" for="typeNumber">Number input</label>
                </div>

Base value

The input value=" " defines a field for the base value.

Edit in sandbox 
        
            
                <div data-mdb-input-init class="form-outline" style="width: 22rem;">
                    <input value="50" type="number" id="typeNumber" class="form-control" />
                    <label class="form-label" for="typeNumber">Number input</label>
                </div>

Precision

In some cases, you might need the value to be rounded to specific decimal points or to change the step size when you increment or decrement the value. Simply use the step=" " input.
Edit in sandbox 
        
            
                <div data-mdb-input-init class="form-outline" style="width: 22rem;">
                    <input step="0.01" value="15.25" type="number" id="typeNumber" class="form-control" />
                    <label class="form-label" for="typeNumber">Number input</label>
                </div>
                <div data-mdb-input-init class="form-outline" style="width: 22rem;">
                    <input step="10" value="0" type="number" id="typeNumber" class="form-control" />
                    <label class="form-label" for="typeNumber">Number input</label>
                </div>

Prefix dollar sign

Icon

Add .trailing to i tag and .form-icon-trailing to input to create trailing $ icon in the input.

Edit in sandbox 
        
            
                    <div data-mdb-input-init class="form-outline" style="width: 22rem;">
                        <i class="fas fa-dollar-sign trailing"></i>
                        <input type="number" id="form1" class="form-control form-icon-trailing" />
                        <label class="form-label" for="form1">Enter the amount</label>
                    </div>

Unremovable postfix

Add id="postfix" to input and JS to make the $ sign unremovable and behind the number.

Edit in sandbox 
        
            

                    <div data-mdb-input-init class="form-outline" style="width: 22rem;">
                        <input id="postfix" value="$" type="text" id="form2" class="form-control" />
                        <label class="form-label" for="form2">Enter the amount</label>
                    </div>
                    
        
    
        
                                
                        const input2 = document.getElementById("postfix");

                        input2.addEventListener("input", (e) => {
                            const { value } = e.target;

                            const len = value.length;
                            const dolarIndex = value.indexOf("$");
                            const number = value.substring(0, len - 1);

                            console.log(dolarIndex === -1);

                            if (dolarIndex !== len - 1 || dolarIndex === -1 || isNaN(number)) {
                                e.target.value = "$";
                                e.target.setSelectionRange(dolarIndex, dolarIndex);
                            }
                        });