PatternLab (1.0.31)

Appearance

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.

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">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 ​

.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 -is-active -has-input -has-select -has-icon">
  <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-button">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" data-additional-classes="-icon">
    <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-icon -has-btn -has-select -is-active">
  <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>
  </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 ​

.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">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>

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: Error, Warning, Success ​

Show Code
html
<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">
  <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>

Old Input Groups ​

See Input Old for examples with old input styles.

2026 - Pharma4u