Input Group

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.

@
@example.com
https://example.com/users/
$
.00
With textarea

							

Propeller Input Group

Add .pmd-input-group followed by .input-group to create Propeller customized input groups.

@
@example.com
https://example.com/users/
$
.00
$
.00
With textarea

							

Propeller Input Group with Icon

Use pmd-input-group-icon class to prepend or append icons with the text inputs.

perm_identity
https
visibility
https
Forget Password

							

Input Group Sizing

Add .input-group-sm and .input-group-lg followed by .input-group for small and large input groups.

Small
Default
Large

							

Input Group Validation

You can even perform validations to the input groups.

@
Please provide a valid username.

							

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.

First and Last Name

							

Multiple Addons

You can add multiple addons before or after the text-input.

$ 0.00
$ 0.00

							

Button 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-icon Class added for Propeller customized input group with Icons. Required