Input Group

Enrich your form inputs with addons such as buttons and text content.

Easily extend form controls by adding text and buttons on either side of textual inputs.

Basic Usage #

Place any element on either side of the text input. You may also place one on both sides of an text input. Follow the example below:

pcs

$ .00

.00

Address

Click to show the entire code

Sizes #

Append input-group--{size} to the input group element. Form controls will inherit the size of the input group.

default

Click to show the entire code

Checkboxes and radios #

Place checkbox and radio elements within an addon element instead of text. Wrap them with the form-control element.

Click to show the entire code

Button Addons #

Click to show the entire code

Button with dropdowns #

Click to show the entire code

<div class="input-group">
                                        <button class="button" data-dropdown-toggle="#splitButtonDropdown" aria-haspopup="true">
                                            <span>Button</span>
                                            <i data-icon="feather__chevronDown"></i>
                                        </button>
                                        <ul class="dropdown">
                                            <li class="dropdown__item">
                                                <a href="">Action</a>
                                            </li>
                                            <li class="dropdown__item">
                                                <a href="">Another action</a>
                                            </li>
                                            <li class="dropdown__item">
                                                <a href="">Something else here</a>
                                            </li>
                                        </ul>
                                        <div class="form-control scheme-gray">
                                            <input type="text" placeholder="Left dropdown" />
                                        </div>
                                    </div>
                                    <div class="input-group">
                                        <div class="form-control scheme-gray">
                                            <input type="text" placeholder="Right dropdown" />
                                        </div>
                                        <button class="button" data-dropdown-toggle="#splitButtonDropdown" aria-haspopup="true" data-tippy-placement="bottom-end">
                                            <span>Button</span>
                                            <i data-icon="feather__chevronDown"></i>
                                        </button>
                                        <ul class="dropdown">
                                            <li class="dropdown__item">
                                                <a href="">Action</a>
                                            </li>
                                            <li class="dropdown__item">
                                                <a href="">Another action</a>
                                            </li>
                                            <li class="dropdown__item">
                                                <a href="">Something else here</a>
                                            </li>
                                        </ul>
                                    </div>

Select #

Options

Click to show the entire code

Messages

Notifications

Input Group

Basic Usage #

Sizes #

Checkboxes and radios #

Button Addons #

Button with dropdowns #

Select #