{% set title = 'Input Group' %} {% set filename = 'form-element-input-group.html' %} {% extends 'src/layouts/master.html' %} {% block content %}

### Input Group

A group for input to display information in before or after input.

#### Basic Input Groups

Add span with `.input-group-text` class before `<input>` for input-group-prepend and add span with `.input-group-text` class after `<input>` for input-group-append.

@
@example.com
$ .00

#### Multiple Inputs

While multiple `<input>`s are supported visually, validation styles are only available for input groups with a single `<input>`.

First and last name

#### Multiple Addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

$ 0.00
$ 0.00

#### Input Groups with Checkboxes and Radios

Input Groups can use with checkboxes and radio buttons also. For it add code for `.checkbox` class and `.radio` class respectively.

#### Input Groups with different sizes

Add `.input-group-{lg/sm}` class to `.input-group` for Large/Small addon/prepend.

Small
Default
Large

#### Input Groups with Buttons

Add `{{ "
` before or after `{{ "" | escape }}` tag

#### Input Groups with Dropdown

Add `<button>` with `.dropdown-toggle` class and add dropdown-menu after it to get input group with dropdown.

#### Custom file input

{% endblock %}