PatternLab (0.1.259)

# Input Groups

TIP

Combinations of Input Fields, Selects and Buttons or Checkboxes.

Comparable to the old Input Wraps

# Input-Button-Group

.c-float-container.-has-input.-has-btn > .c-input + .c-btn.-input

hide code 
<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

hide code 
<div class="c-float-container -has-input -has-select">
    <label class="c-label" for="input-button">Gesamtmenge</label>
    <input type="text" class="c-input" data-placeholder="100" id="input-button" name="" value="100" />
    <select class="c-select -icon" id="select-gesamtmenge">
        <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-input + .c-select

hide code 
<div class="c-float-container -has-input -has-select -has-icon">
    <div class="c-float-container__icon -left">
        <span class="fa fa-info-circle h-link-color h-help-pointer"></span>
    </div>
    <label class="c-label" for="input-button">Gesamtmenge</label>
    <input type="text" class="c-input" data-placeholder="100" id="input-button" 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

hide code 
<div class="c-float-container -has-icon -has-btn -has-select -is-active m-t-s">
    <div class="c-float-container__icon">
        <span class="far fa-sliders-h"></span>
    </div>
    <label class="c-label -redesign" for="al-filter-auswahl">Filter auswählen</label>
    <select class="js-select2 c-select -redesign js-saved-filters" id="al-filter-auswahl" name="filter-auswahl">
    </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

hide code 
<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" title="Speichern" data-placement="left">
        <span class="fa fa-save"></span>
    </button>
</div>

# 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]

hide code 
<div class="c-float-container -has-input -has-btn" data-activate-btn data-min-amount="5">
    <label class="c-label" for="input-button-disabled">Floating Label</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

hide code 
<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>

← Image Lightbox →