Input Groups
TIP
Combinations of Input Fields, Selects and Buttons or Checkboxes.
- See Forms Module for form validation examples.
- Related: Search Fields
Input-Button-Group
.c-float-container.-has-input.-has-btn > .c-input + .c-btn.-input
Show Code
html
<div class="c-float-container -has-input -has-btn">
<label class="c-label" for="input-button-1">Floating Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-button-1" name="" value="" />
<button type="button" class="c-btn -primary -input -icon-left" title="Speichern">
<i class="fa fa-save"></i>
Speichern
</button>
</div>Input-Select-Group
Without Select2
.c-float-container.-has-input.-has-select > .c-input + .c-select
Show Code
html
<div class="c-float-container -has-input -has-select">
<label class="c-label" for="input-select">Gesamtmenge</label>
<input type="text" class="c-input" data-placeholder="100" id="input-select" name="" value="100" />
<select class="c-select -icon">
<option value="1" selected>g</option>
<option value="2">Stück</option>
</select>
</div>With Select2 and Icon
.c-float-container.-has-input.-has-select.-has-icon > c-float-container__icon.-left + .c-input + .c-select
Show Code
html
<div class="c-float-container -has-input -has-select -has-icon">
<div class="c-float-container__icon -left">
<i class="fa fa-info-circle h-link-color h-help-pointer" aria-hidden="true"></i>
</div>
<label class="c-label" for="input-select2">Gesamtmenge</label>
<input type="text" class="c-input" data-placeholder="100" id="input-select2" name="" value="100" />
<select class="js-select2 -icon" id="select-gesamtmenge" data-additional-classes="-icon">
<option value="1" selected>g</option>
<option value="2">Stück</option>
</select>
</div>Select With Inline-Btn
Show Code
html
<div class="c-float-container -has-icon -has-btn -has-select -is-active">
<div class="c-float-container__icon" aria-hidden="true">
<span class="far fa-sliders-h"></span>
</div>
<select class="js-select2 c-select -redesign js-saved-filters" id="al-filter-auswahl">
<option value="0" selected>Filter auswählen</option>
<option value="1">Filter 1</option>
<option value="2">Filter 2</option>
<option value="3">Filter 3</option>
</select>
<button
type="button"
class="c-btn -square-btn -primary -input -redesign js-tooltip js-filter-delete"
title="Ausgewählten Filter löschen"
data-spinner>
<span class="fa fa-trash"></span>
</button>
</div>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
Show Code
html
<div class="c-float-container -has-input -has-btn">
<label class="c-label" for="input-button-tooltip">Floating Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-button-tooltip" name="" value="" />
<button type="button" class="c-btn -square-btn -primary -input js-tooltip" title="Speichern" data-placement="left">
<span class="fa fa-save"></span>
</button>
</div>Input with Disabled Inline-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]
Show Code
html
<div class="c-float-container -has-input -has-btn" data-activate-btn data-min-amount="5">
<label class="c-label" for="input-button-disabled">Type at least 5 characters ..</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-button-disabled" name="" value="" />
<button type="button" disabled
class="c-btn -square-btn -primary -input js-tooltip" title="Speichern">
<span class="fa fa-save"></span>
</button>
</div>Input with Checkbox
.c-float-container.-has-input + .c-checkbox.-large.-input
Show Code
html
<div class="h-flex h-flex-row h-vertical-center h-space-between">
<div class="c-float-container -has-input m-r-s">
<label class="c-label" for="input-checkbox">Floating Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-checkbox" name="" value="" />
</div>
<div class="c-checkbox -large -input m-t-reset m-x-reset">
<input id="i4" type="checkbox" checked>
<label class="c-label" for="i4"></label>
</div>
</div>Input States: Error, Warning, Success
.c-float-container.-has-input.-has-btn.-has-error > .c-input + .c-btn.-input.-error
Show Code
html
<div class="c-float-container -has-input -has-btn -has-error">
<label class="c-label" for="input-states-1">Floating Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-states-1" name="" value="" />
<button type="button" class="c-btn -square-btn -primary -input -error" title="Speichern">
<i class="fa fa-save"></i>
</button>
</div>
<div class="c-float-container -has-input -has-btn -has-warning">
<label class="c-label" for="input-states-2">Floating Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-states-2" name="" value="" />
<button type="button" class="c-btn -square-btn -primary -input -warning" title="Speichern">
<i class="fa fa-save"></i>
</button>
</div>
<div class="c-float-container -has-input -has-btn -has-success">
<label class="c-label" for="input-states-3">Floating Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-states-3" name="" value="" />
<button type="button" class="c-btn -square-btn -primary -input -success" title="Speichern">
<i class="fa fa-save"></i>
</button>
</div>