Input Groups
TIP
Combinations of Input Fields, Selects, Buttons or Checkboxes.
- See Forms Module for form validation examples.
- Related: Search
Input-Button-Group
.c-float-container.-has-input.-has-btn > .c-input + .c-btn.-input ::: demo
Input-Select-Group
Without Select2
.c-float-container.-has-input.-has-select > .c-input + .c-select ::: demo
With Select2 and Icon
.c-float-container.-has-input.-has-select.-has-icon > c-float-container__icon.-left + .c-input + .c-select ::: demo
Select With Inline-Btn
::: demo
:::Input with Inline-Button and Tooltip
TIP
It is recommended to use Square-Buttons only in combination with a Tooltip. (Add the Class js-tooltip and a title Attribute to the Button.)
.c-float-container.-has-input.-has-btn > .c-input.-icon + .c-btn.-icon-btn.-square.-input ::: demo
Input with Disabled Square-Button
TIP
Add the data-min-amount attribute to activate the button when the user inserts a minimum amount of characters. The minimum amount is defined via the extra attribute data-min-amount="5".
.c-float-container.-has-input.-has-btn[data-activate-btn][data-min-amount="5] > .c-input + .c-btn.-icon-btn.-square.-input[disabled] ::: demo
Input with Checkbox
.c-float-container.-has-input + .c-checkbox.-large.-input
::: demo
Input States: Error, Warning, Success
.c-float-container.-has-input.-has-btn.-has-error > .c-input + .c-btn.-input.-error ::: demo
Old Input Groups
See Input Old for examples with old input styles.