❮ Previous Next ❯

Input Enhancements

  • Enhance Bootstrap form inputs using input groups and labels.

  • Introduction to Input Enhancements

    Input enhancements are used to improve usability, clarity, and visual context of form inputs.

    In Bootstrap 5, input enhancements allow you to:

    • Add text, icons, or buttons to inputs

    • Control input sizes consistently

    • Improve user understanding of expected input

    These enhancements do not change input behavior, only presentation and usability.

    Input Groups

    What Is an Input Group ?

    An Input Group allows you to combine:

    • Input fields

    • Text

    • Icons

    • Buttons

    into a single horizontal unit.

    Input groups are used when an input needs context or an attached action.

    Why Use Input Groups ?

    Input groups help:

    • Clarify meaning of input values

    • Reduce extra labels

    • Attach actions like search or submit

    • Improve form aesthetics

    They are commonly used for:

    • Currency inputs

    • Search bars

    • Username / email prefixes

    • Action-based inputs

    Basic Input Group Structure

    An input group consists of:

    1. Wrapper .input-group

    2. One or more .input-group-text or buttons

    3. A .form-control

Adding Text Prefix to Input Fields

The .input-group component allows adding text or elements before or after an input field. 

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

  • Explanation:

    • .input-group-text adds static text

    • Input and text appear as one unit

Adding Text Suffix to Input Fields

Input groups can place text after an input field using the .input-group-text element. 

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">₹</span>
</div>

  • Used for:

    • Currency

    • Units

    • Measurements

Adding a Button to an Input Group

The .input-group component allows combining input fields with buttons in a single line. 

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <button class="btn btn-primary">Search</button>
</div>

  • Common use cases:

    • Search bars

    • OTP verification

    • Quick actions

Using Input Groups with Buttons and Multiple Addons

Input groups allow combining inputs with buttons or multiple text addons in a single field layout. 

<!-- Input Group with Button -->
<div class="input-group mb-3">
  <button class="btn btn-outline-secondary">Upload</button>
  <input type="file" class="form-control">
</div>

<!-- Input Group with Multiple Addons -->
<div class="input-group mb-3">
  <span class="input-group-text">https://</span>
  <input type="text" class="form-control" placeholder="website">
  <span class="input-group-text">.com</span>
</div>
  • Use carefully to avoid clutter.

Combining Select Dropdown with Input Group

Input groups can include select dropdowns along with labels or text addons. 

<div class="input-group mb-3">
  <label class="input-group-text">Options</label>
  <select class="form-select">
    <option selected>Choose...</option>
    <option>One</option>
    <option>Two</option>
  </select>
</div>

  • Input Group Best Practices

    • Use input groups only when context is required

    • Keep addons short and clear

    • Avoid too many addons

    • Do not replace labels completely

    • Ensure accessibility with proper labels

    Sizing Inputs

    Why Input Sizing Matters

    Input size affects:

    • Visual hierarchy

    • Readability

    • User comfort

    • Form balance

    Bootstrap provides standardized sizing utilities to keep forms consistent.

Creating Default Size Input Fields

The .form-control class creates a standard-sized input field with Bootstrap styling. 

<input type="text" class="form-control">
  • This is the recommended default for most forms.

Creating a Small-Sized Input Field

The .form-control-sm class creates a smaller input field than the default size. 

<input type="text" class="form-control form-control-sm">

  • Used when:

    • Space is limited

    • Secondary forms

    • Compact UIs

Creating a Large-Sized Input Field

The .form-control-lg class increases the size of the input field for better visibility and emphasis. 

<input type="text" class="form-control form-control-lg">

  • Used when:

    • Primary actions

    • Important inputs

    • Touch-friendly interfaces

Adjusting Select Input Sizes

Use .form-select-sm and .form-select-lg to create smaller or larger select dropdowns. 

<select class="form-select form-select-sm"></select>
<select class="form-select form-select-lg"></select>

  • Note:

    • .form-control-sm  does not work on <select>

    • Always use .form-select-*

Adjusting Input Group Sizes

The .input-group-sm and .input-group-lg classes change the size of the entire input group. 

<div class="input-group input-group-sm">
  <span class="input-group-text">@</span>
  <input class="form-control">
</div>

<div class="input-group input-group-lg">
  <span class="input-group-text">@</span>
  <input class="form-control">
</div>

  • Mixing Sizes (Avoid)

    Avoid mixing different sizes inside the same form unless required.

    Bad practice:

    • Small input next to large input

    • Inconsistent visual flow

    Consistency improves usability.

    Common Mistakes

    • Using .form-control on <select>

    • Overusing input groups

    • Adding too many addons

    • Mixing input sizes randomly

    • Removing labels completely

      Best Practices for Input Enhancements

      • Use input groups only when needed

      • Keep enhancements meaningful

      • Prefer default sizes

      • Maintain consistency

      • Do not sacrifice accessibility

    ❮ Previous Next ❯