Input

TIP

• See Forms Organism for form validation examples.
  
• See Old Inputs for the "old" style with smaller input fields and Textareas: Autosize for autosize.js examples.
• See Input Groups Molecule for combinations of Input Fields, Selects and Buttons or Checkboxes.

WARNING

• Always use the for attribute to link the label to the input with the same id. This way the input can be focused by clicking the label.

Default Input with Floating Label

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

Floating Label

Show Code

<div class="c-float-container -has-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

Floating Label

Show Code

<div class="p-b-l h-highlight-block">
  <div class="c-float-container -has-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

Floating Label

Show Code

<div class="c-float-container -has-input -has-icon">
  <div class="c-float-container__icon">
      <i class="far fa-calendar" aria-hidden="true"></i>
  </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>

Small Icon

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

Floating Label

Show Code

<div class="c-float-container -has-input -has-icon -has-small-icon">
  <div class="c-float-container__icon -small">
    <span class="far fa-calendar" aria-hidden="true"></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

Floating Label

Show Code

<div class="c-float-container -has-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" aria-hidden="true"></span>
  </div>
  <div class="float-tooltip -small">
    <span>Prüfzertifikat löschen</span>
  </div>
</div>

Disabled Input

.c-float-container.-is-disabled > .c-input:disabled

Label of Disabled Input

Label of Disabled Input

Label of Disabled Input

Show Code

<div class="c-float-container -has-input -is-disabled">
      <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>
    <div class="c-float-container -has-input -is-disabled 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>
    <div class="h-highlight-block m-t-l">
        <div class="c-float-container -has-input -light -is-disabled -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="Disabled light input" />
      </div>
    </div>

Spotlight

.c-float-container.-has-input.-has-spotlight

Floating Label

Show Code

<div class="p-b-l h-highlight-block">
  <div class="c-float-container -has-input -has-spotlight">
    <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>

States

Error

.c-float-container.-has-input.-has-error[.-is-highlighted]

Floating Label

Floating Label

Show Code

<div class="grid">
  <div class="col">
    <div class="c-float-container -has-input -has-error">
      <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>
  <div class="col">
    <div class="c-float-container -has-input -has-error -is-highlighted">
      <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>
</div>

Warning

.c-float-container.-has-input.-has-warning[.-is-highlighted]

Floating Label

Floating Label

Show Code

<div class="grid">
  <div class="col">
    <div class="c-float-container -has-input -has-warning">
      <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>
  <div class="col">
    <div class="c-float-container -has-input -has-warning -is-highlighted">
      <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>
</div>

Success

.c-float-container.-has-input.-has-success[.-is-highlighted]

Floating Label

Floating Label

Show Code

<div class="grid">
  <div class="col">
    <div class="c-float-container -has-input -has-success">
      <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>
  <div class="col">
    <div class="c-float-container -has-input -has-success -is-highlighted">
      <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>
</div>

With Infotext / Units / Prefixes

.c-float-container.-has-info > .c-float-container__info

Floating Label

ad

Show Code

<div class="c-float-container -has-input -has-info">
  <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 class="c-float-container__info">
      ad
  </div>
</div>

.c-float-container.-has-info.-info-right > .c-float-container__info.-right

Floating Label

ml/g

Show Code

<div class="c-float-container -has-input -has-info -info-right">
  <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 class="c-float-container__info -right">
    ml/g
  </div>
</div>

---