PatternLab (0.1.259)

# Input

TIP

# Default Input with Floating Label

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

hide code 
<div class="c-float-container -input">
    <label class="c-label" for="input1-test">Floating Label</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input1-test" name="" value="" />
</div>

# Input on Dark Background

.c-float-container.-has-input.-light > .c-input.-light

hide code 
<div class="p-b-l h-highlight-block">
    <div class="c-float-container -input -light">
        <label class="c-label" for="input-example">Floating Label</label>
        <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-example" name="" value="" />
    </div>
</div>

# Input with Icon

.c-float-container.-has-input.-has-icon > .c-float-container__icon

hide code 
<div class="c-float-container -input -has-icon">
    <div class="c-float-container__icon">
        <span class="far fa-calendar"></span>
    </div>
    <label class="c-label" for="input-icon">Floating Label</label>
    <input type="text" class="c-input -icon" data-placeholder=".. and Placeholder Text" id="input-icon" name="" value="" />
</div>

# Input with Info-Tooltip

.c-float-container.-has-input.-has-icon.-icon-right > .c-input.-icon

Prüfzertifikat löschen
hide code 
<div class="c-float-container -input -has-icon -icon-right">
    <label class="c-label" for="input-info">Floating Label</label>
    <input type="text" class="c-input -icon" data-placeholder=".. and Placeholder Text" id="input-info" name="" value="" />
    <div class="c-float-container__icon -right js-tooltip" data-placement="left">
        <span class="fa fa-info-circle"></span>
    </div>
    <div class="c-tooltip__content -small">
        <span>Prüfzertifikat löschen</span>
    </div>
</div>

# Disabled Input with Tooltip

.c-float-container.-is-disabled > .c-input.-icon:disabled + .c-float-container__icon

hide code 
<div class="c-float-container -input -is-disabled -has-icon -icon-right">
    <label class="c-label" for="input-info">Label of Disabled Input</label>
    <input type="text" disabled class="c-input -icon" data-placeholder=".. and Placeholder Text" id="input-info" name="" value="" />
    <div class="c-float-container__icon -right js-tooltip" title="Dieses Eingabefeld ist deaktiviert" data-placement="left">
        <span class="fa fa-info-circle"></span>
    </div>
</div>
<div class="c-float-container -input -is-disabled -has-icon -icon-right m-t-m">
    <label class="c-label" for="input-info">Label of Disabled Input</label>
    <input type="text" disabled class="c-input -icon" data-placeholder=".. and Placeholder Text" id="input-info" name="" value="Default value of disabled input" />
    <div class="c-float-container__icon -right js-tooltip" title="Dieses Eingabefeld ist deaktiviert" data-placement="left">
        <span class="fa fa-info-circle"></span>
    </div>
</div>

# Input "Old-Style"

TIP

See here: Old Inputs

# Autosize Input / Flexible Textfield

TIP

Based on Autosize JS (opens new window)

See Textareas: Autosize for Usage Example.

← Input Old-Style →