Input Group
Bootstrap 4 Input Group with Material Design UI
An Input Group is created to extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Bootstrap 4 Input Group
Use .input-group in place of .form-group to create input groups. Add class .input-group-prepend and .input-group-append to either prepend or append elements to a single .form-control respectively.
Propeller Input Group
Add .pmd-input-group followed by .input-group to create Propeller customized input groups.
Propeller Outline Input Group
Add .pmd-input-group-outline followed by .input-group to create Propeller customized outline input groups.
.pmd-textfield-outline next to .pmd-textfield in the <div> wrapping the input tag.Propeller Filled Input Group
Add .pmd-input-group-filled next to .input-group to create Propeller customized filled input groups.
.pmd-textfield-filled next to .pmd-textfield in the <div> wrapping the input tag.Propeller Input Group with Icon
Use .pmd-input-group-icon next to .pmd-input-group class to prepend or append icons with the Propeller Inputs.
Input Group Sizes
Bootstrap 4 provides inputs groups in various sizes: small, default and large. >Add .input-group-sm and .input-group-lg followed by .input-group for small and large input groups respectively.
Input Group Validation
You can even perform validations to the input groups.
Checkbox and Radio
Checkbox and Radio button can also be added with the Inputs.
Multiple Inputs
You can add multiple inputs in one input group.
Multiple Addons
You can add multiple addons before or after the inputs.
Button Addons
You can even add buttons before or after the inputs.
Dropdown Addons
Segemented Buttons
Custom Select Input Group
Input groups do support custom select as an input.
Custom File Input Group
Input groups do support custom file as an input.
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the form elements. The table lists the available classes and their effects.
| Propeller Class | Effect | Remark |
|---|---|---|
.pmd-input-group |
Class added for Propeller customized input group. | Required |
.pmd-input-group-outline |
Class added to create Propeller customized outline input group. | Required |
.pmd-input-group-filled |
Class added to create Propeller customized filled input group. | Required |
.pmd-input-group-icon |
Class added for Propeller customized input group with Icons. | Optional |