PatternLab (1.0.31)

Appearance

Old Input ​

.c-input.-old

Input fields are used for text inputs. This component is about the old (deprecated) style of input fields, the new style is described in Input.

Default Input ​

html
<input type="text" class="c-input -old" name="" value="" />

Different Input Sizes ​

Small Inputs (e.g. for Units) ​

.c-input.-old.-small
.c-input.-old.-einheit

html
<input type="text" class="c-input -old -small" name="" value="" placeholder="12 g" />
<input type="text" class="c-input -old -einheit" name="" value="" placeholder="12 g" />

Medium Inputs ​

.c-input.-old.-medium

html
<input type="text" class="c-input -old -medium" name="" value="" placeholder="0,2342345 mg" />

Large Inputs ​

.c-input.-old.-large

html
<input type="text" class="c-input -old -large" name="" value="" placeholder="Large Input Placeholder" />

Input Type Number ​

.c-input.-old.-small

html
<input type="number" class="c-input -old -small" name="" value="" placeholder="-small" />

Hide Arrows in Number-Textfield:

.c-input.-hide-arrows

html
<input type="number" class="c-input -old -hide-arrows -small" name="" value="" placeholder="-small" />

Disabled Input ​

.c-input.-old:disabled or .c-input.-old.-disabled

html
<input type="text" class="c-input -old" disabled name="" value="" placeholder="Disabled Input" />

Color Classes ​

.c-input.-old + .-white / .-success / .-highlight / .-warning / .-error

Show Code
html
<div class="h-highlight-block -small m-b-m">
  <input type="text" class="c-input -old -white" name="" value="" placeholder="-white" />
</div>
<input type="text" class="c-input -old -success m-b-m" name="" value="" placeholder="-success" />
<input type="text" class="c-input -old -warning m-b-m" name="" value="" placeholder="-warning or -highlight" />
<input type="text" class="c-input -old -error m-b-m" name="" value="" placeholder="-error" />

Pseudo Input-Fields ​

TODO Refactoring: Old Plausi Class Names -> ABEM Style

.pseudo-field

I'm not a real input field
html
<div class="pseudo-field">I'm not a real input field</div>

Input Wraps with inline Prefixes, Unit-(Dropdowns) or Icons ​

The .c-input-wrap is a wrapper-div that contains the input- or select field, a prefix, unit or icon.

PLEASE NOTE

The classes .menge-wrap, .inline-menge-wrap, .prefix, .einheit, .float-width-wrap are deprecated ⚠️

html
div.c-input-wrap
    > span.c-input-wrap__prefix
    > span.c-input-wrap__unit
    > div.c-input-wrap__input
        > c-select.-old / .c-input.-old
ad I.E.
Show Code
html

<div class="grid">
  <div class="col-6">
    <div class="c-input-wrap">
      <span class="c-input-wrap__prefix js-tooltip" title="I'm a tooltip">ad </span>
      <span class="c-input-wrap__unit">I.E.</span>
      <div class="c-input-wrap__input">
        <input type="text" class="c-input -old" value="200" />
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="c-input-wrap">
      <select class="c-select -old" name="opts">
        <option value='1'>mg</option>
        <option value='2'>g</option>
        <option value='3'>I.E.</option>
      </select>
      <div class="c-input-wrap__input">
        <input class="c-input -old" placeholder="40,05" />
      </div>
    </div>
  </div>
</div>

Byhand Icon ​

The .byhand-icon is hidden by default and can be shown by adding the class .hp-show.

Show Code
html
<div class="c-input-wrap">
  <span class="byhand-icon js-tooltip hp-show" data-title="Handeinwaage"></span>
  <div class="c-input-wrap__input">
    <input type="text" data-vv-name="istEinwaage" class="c-input -old" />
  </div>
</div>

Modifier Classes ​

.c-input-wrap + .-striped / .-white / .-highlight / .-warning / .-success / .-error

Show Code
html
<div class="grid">
  <div class="col-6">
    <div class="c-input-wrap -striped">
      <select class="c-select -old" name="opts">
        <option value='1'>mg</option>
        <option value='2'>g</option>
        <option value='3'>I.E.</option>
      </select>
      <div class="c-input-wrap__input">
        <input class="c-input -old" placeholder="40,05" />
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="c-input-wrap -white">
      <select class="c-select -old" name="opts">
        <option value='1'>mg</option>
        <option value='2'>g</option>
        <option value='3'>I.E.</option>
      </select>
      <div class="c-input-wrap__input">
        <input class="c-input -old" placeholder="40,05" />
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="c-input-wrap -highlight">
      <select class="c-select -old" name="opts">
        <option value='1'>mg</option>
        <option value='2'>g</option>
        <option value='3'>I.E.</option>
      </select>
      <div class="c-input-wrap__input">
        <input class="c-input -old" placeholder="40,05" />
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="c-input-wrap -warning">
      <select class="c-select -old" name="opts">
        <option value='1'>mg</option>
        <option value='2'>g</option>
        <option value='3'>I.E.</option>
      </select>
      <div class="c-input-wrap__input">
        <input class="c-input -old" placeholder="40,05" />
      </div>
    </div>
  </div>

  <div class="col-6">
    <div class="c-input-wrap -success">
      <select class="c-select -old" name="opts">
        <option value='1'>mg</option>
        <option value='2'>g</option>
        <option value='3'>I.E.</option>
      </select>
      <div class="c-input-wrap__input">
        <input class="c-input -old" placeholder="40,05" />
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="c-input-wrap -error">
      <select class="c-select -old" name="opts">
        <option value='1'>mg</option>
        <option value='2'>g</option>
        <option value='3'>I.E.</option>
      </select>
      <div class="c-input-wrap__input">
        <input class="c-input -old" placeholder="40,05" />
      </div>
    </div>
  </div>
</div>

Autosize Input / Flexible Textfield ​

The autosize plugin is used to automatically adjust the height of the input field.
See Textareas: Autosize for usage example.

2026 - Pharma4u