Input Groups
This page contains examples of how to use the .c-float-container class to combine different form elements like Inputs, Selects, Buttons, Icon Buttons or Checkboxes.
- See Float Container for details about the wrapper element.
- See Forms Module for form validation examples.
- Related: Search
Work in Progress
Refactor the css so we don't need all the modifier -has-XY classes anymore: use :has() instead.
Input-Button Group
.c-float-container.-has-btn > .c-input + .c-btn.-input
Show Code
html
<div class="c-float-container -has-btn">
<label class="c-label" for="input-button-1">Input Button Group</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">
<i class="far fa-save" aria-hidden="true"></i>
Speichern
</button>
</div>Input-Select Group
Show Code
html
<div class="c-float-container -has-input -has-select">
<div class="c-float-container__icon -left">
<span class="far fa-info-circle h-link-color h-help-pointer js-tooltip"
data-title="Info-Text"
aria-hidden="true">
</span>
</div>
<label class="c-label" for="input-select2-group">Input Select Group</label>
<input type="text" class="c-input" data-placeholder="100" id="input-select2-group" name="" value="100" />
<select class="js-select2 -icon" id="input-select2-group-select" data-additional-classes="-icon h-width-30">
<option value="1" selected>g</option>
<option value="2">Stück</option>
</select>
</div>Select-Button Group
Show Code
html
<div class="c-float-container -has-select -has-btn">
<div class="c-float-container__icon">
<span class="far fa-sliders-h" aria-hidden="true"></span>
</div>
<label class="c-label" for="al-filter-auswahl1">Select Button Group</label>
<select class="c-select -redesign" id="al-filter-auswahl1" name="filter-auswahl">
<option selected="selected">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</option>
<option>2</option>
<option>3</option>
</select>
<button type="button" class="c-btn -square-btn -primary -input -redesign" data-spinner>
<i class="far fa-trash" aria-hidden="true"></i>
<span class="h-sr-only">Filter löschen</span>
</button>
</div>Input-Inline-Button Group
Show Code
html
<div class="c-float-container -has-input -has-btn">
<label class="c-label" for="input-button">Floating Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-button" name="" value="" />
<button type="button" class="c-btn -square-btn -primary -input js-tooltip" data-title="Speichern" data-placement="top">
<i class="far fa-save" aria-hidden="true"></i>
<span class="h-sr-only">Speichern</span>
</button>
</div>Password Input Example
Show Code
html
<div class="c-float-container -has-input -has-btn">
<label class="c-label" for="password-input">Passwort</label>
<input type="password" class="c-input" id="password-input" name="" value="TestPassword123" />
<button type="button"
id="show-password-example"
class="c-btn -square-btn -light -input js-tooltip"
data-title="Passwort anzeigen"
data-placement="top">
<i class="far fa-eye" aria-hidden="true"></i>
<span class="h-sr-only">Passwort anzeigen</span>
</button>
</div>Input with Disabled Icon-Button
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".
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">Filter speichern</label>
<input type="text" class="c-input" data-placeholder="Filter-Namen eingeben (mindestens 5 Buchstaben)" id="input-button-disabled" name="" value="" />
<button type="button" disabled
class="c-btn -square-btn -primary -input js-tooltip" data-title="Bitte Namen eingeben" data-placement="left">
<i class="far fa-save" aria-hidden="true"></i>
<span class="h-sr-only">Speichern</span>
</button>
</div>Input States
See Input States and Button for more.
Show Code
html
<div class="c-float-container -has-btn">
<label class="c-label" for="input-button-1">Floating Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" disabled="disabled" id="input-button-1" name="" value="" />
<button type="button" class="c-btn -square-btn -primary -input js-tooltip" disabled="disabled" data-title="Speichern" data-placement="top">
<i class="far fa-save" aria-hidden="true"></i>
<span class="h-sr-only">Speichern</span>
</button>
</div>
<div class="c-float-container -has-input -has-btn -has-spotlight">
<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 -square-btn -primary -input js-tooltip" data-title="Speichern" data-placement="top">
<i class="far fa-save" aria-hidden="true"></i>
<span class="h-sr-only">Speichern</span>
</button>
</div>
<div class="c-float-container -has-input -has-btn -has-error">
<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 -square-btn -primary -input -error js-tooltip" data-title="Speichern" data-placement="top">
<i class="far fa-save" aria-hidden="true"></i>
<span class="h-sr-only">Speichern</span>
</button>
</div>
<div class="c-float-container -has-input -has-btn -has-warning">
<label class="c-label" for="input-button-2">Floating Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-button-2" name="" value="" />
<button type="button" class="c-btn -square-btn -primary -input -warning js-tooltip" data-title="Speichern" data-placement="top">
<i class="far fa-save" aria-hidden="true"></i>
<span class="h-sr-only">Speichern</span>
</button>
</div>
<div class="c-float-container -has-input -has-btn -has-success">
<label class="c-label" for="input-button-3">Floating Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-button-3" name="" value="" />
<button type="button" class="c-btn -square-btn -primary -input -success" data-title="Speichern" data-placement="top">
<i class="far fa-save" aria-hidden="true"></i>
<span class="h-sr-only">Speichern</span>
</button>
</div>Input-Checkbox Group
.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 h-gap-s">
<div class="c-checkbox -input m-t-reset m-x-reset">
<input id="i4" type="checkbox" checked>
<label class="c-label" for="i4"></label>
</div>
<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>Old Input Groups
See Input Old for examples with old input styles.