INPUT GROUPS: Extend form controls with text, icons, buttons, and steppers
VARIANTS: Text Addons | Icons | Stepper | Buttons | Combined
Input groups allow you to attach additional context to form inputs through prefixes, suffixes, icons, and action buttons. Use them to improve clarity and reduce the number of separate form fields needed.
Text Addons: Attach static text labels to inputs for units, currencies, or contextual information.
<div class="tw-input-group"> <span class="tw-input-group-text">£</span> <input class="tw-form-control"></div>
Icon Inputs: Add Font Awesome icons inside inputs for visual cues. Icons can be decorative or interactive (clearable, password toggle).
Search with Icon
Email Input with Icon
Date Picker with Icon
Clearable Input (Interactive Icon)
Password with Visibility Toggle
Search with Both Icons
<div class="tw-input-group tw-has-icon-start"> <i class="tw-input-group-icon tw-input-group-icon-start fa-solid fa-magnifying-glass"></i> <input class="tw-form-control"></div>
Number Stepper: Attach up/down buttons to number inputs for easy incrementing/decrementing. Perfect for quantity selectors.
Basic Quantity Selector
Age with Stepper
Disabled Stepper
<div class="tw-input-group"> <input type="number" class="tw-form-control"> <div class="tw-input-group-stepper"> <button class="tw-input-group-stepper-btn">▲</button> <button class="tw-input-group-stepper-btn">▼</button> </div></div>
Button Addons: Attach action buttons directly to inputs for immediate actions like search, submit, or copy.
Search with Button
Email Subscription
Coupon Code
Copy to Clipboard
Multiple Buttons
<div class="tw-input-group"> <input class="tw-form-control"> <button class="tw-btn tw-btn-primary">Search</button></div>
Combined: Mix and match different addon types for complex input patterns.
Search: Icon + Button
Price: Currency + Stepper
Phone Number with Country
Password with Toggle + Button
Sizes: All input group components support small, default, and large sizes.
Small Size
Default Size
Large Size
<div class="tw-input-group tw-input-group-sm">...</div><div class="tw-input-group tw-input-group-lg">...</div>
Validation: Input groups work seamlessly with validation states.
Real-world examples: Typical input group combinations used in applications.
Search Bar
Product Cart Item
£29.99
Price Filter
Quick Reference
Container: .tw-input-group
Text Addon: .tw-input-group-text
Icon: .tw-input-group-icon | .tw-input-group-icon-start | .tw-input-group-icon-end | .tw-input-group-icon-clickable
Icon Modifiers: .tw-has-icon-start | .tw-has-icon-end (add to .tw-input-group)
Stepper: .tw-input-group-stepper > .tw-input-group-stepper-btn
Button: .tw-input-group > .tw-btn
Sizes: .tw-input-group-sm | .tw-input-group-lg
Note: Use Font Awesome icons (.fa-solid, .fa-regular, etc.)