Input

The Input component is used to create interactive controls for web-based forms in order to accept data from the user.

• New input fields are always embedded in a Float Container.
• See Old Inputs for the "old" style with smaller input fields and Textareas: Autosize for autosize.js examples.
• See Input Groups for combinations of Input Fields, Selects and Buttons or Checkboxes.
• See Forms Organism for form validation examples.
  

work in progress

Refactor the css so we don't need all the modifier -has-XY classes anymore: use :has() instead.

Default Input

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.

.c-float-container > .c-input

Input with Floating Label

Input with Floating Label and Content

Show Code

<div class="h-flex h-flex-row h-align-start gap-s">
  <div class="c-float-container">
    <label class="c-label" for="input1-float-test">Input with Floating Label</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input1-float-test" name="" value="" />
  </div>
  <div class="c-float-container">
    <input type="text" class="c-input" id="input-test-nolabel" name="" placeholder="Input without Label but Placeholder Text" value="" />
  </div>
</div>
<div class="h-flex h-flex-row h-align-start gap-s">
  <div class="c-float-container">
    <label class="c-label" for="input2-float-test">Input with Floating Label and Content</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input2-float-test" name="" value="Example value" />
  </div>
  <div class="c-float-container">
    <input type="text" class="c-input" id="input2-test-nolabel" name="" placeholder="Placeholder Text" value="Input without Label" />
  </div>

</div>

Input on Dark Background

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

Floating Label

Show Code

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

Input with Icon

.c-float-container > .c-float-container__icon[.-small]

Input with Icon

Input with Small Icon

Show Code

<div class="c-float-container">
  <div class="c-float-container__icon">
      <i class="far fa-calendar" aria-hidden="true"></i>
  </div>
  <label class="c-label" for="input-icon">Input with Icon</label>
  <input type="text" class="c-input -icon" data-placeholder=".. and Placeholder Text" id="input-icon" name="" value="" />
</div>
<div class="c-float-container">
  <div class="c-float-container__icon -small">
      <i class="far fa-calendar" aria-hidden="true"></i>
  </div>
  <label class="c-label" for="input-icon-small">Input with Small Icon</label>
  <input type="text" class="c-input -icon" data-placeholder=".. and Placeholder Text" id="input-icon-small" name="" value="" />
</div>

Input with Info-Tooltip

For more details, see Tooltips.
.c-float-container[.-icon-right] > .c-input + .c-float-container__icon

JS-Tooltip / Icon Left

Weitere Informationen

JS-Tooltip / Icon Right

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Tooltip / Icon Left

Weitere Informationen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Tooltip / Icon Right

Weitere Informationen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Show Code

<div class="h-flex h-flex-row h-align-start gap-s">
  <div class="c-float-container">
    <label class="c-label" for="input-info-tooltip1">JS-Tooltip / Icon Left</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-info-tooltip1" name="" value="" />
    <div class="c-float-container__icon js-tooltip" data-title="Short Tooltip" data-placement="top">
      <span class="far fa-info-circle" aria-hidden="true"></span>
      <span class="h-sr-only">Weitere Informationen</span>
    </div>
  </div>

  <div class="c-float-container">
    <label class="c-label" for="input-info-tooltip2">JS-Tooltip / Icon Right</label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-info-tooltip2" name="" value="" />
    <div class="c-float-container__icon -right js-tooltip" data-placement="top">
      <span class="far fa-info-circle" aria-hidden="true"></span>
    </div>
    <div class="c-tooltip__content">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
  </div>
</div>

<div class="h-flex h-flex-row h-align-start gap-s">
  <div class="c-float-container">
    <label class="c-label" for="input-css-tooltip1">
      CSS-Tooltip / Icon Left
    </label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-css-tooltip1" value="">
    <div class="c-float-container__icon c-tooltip__trigger -open-top" tabindex="0">
      <span aria-hidden="true" class="far fa-info-circle"></span>
      <span class="h-sr-only">Weitere Informationen</span>
      <div class="c-tooltip -large m-l-m -m-b-xs" role="tooltip">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </div>
    </div>
  </div>
  <div class="c-float-container">
    <label class="c-label" for="input-css-tooltip2">
      CSS-Tooltip / Icon Right
    </label>
    <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-css-tooltip2" value="">
    <div class="c-float-container__icon c-tooltip__trigger -open-left -open-top -right" tabindex="0">
      <span aria-hidden="true" class="far fa-info-circle"></span>
      <span class="h-sr-only">Weitere Informationen</span>
      <div class="c-tooltip -large -m-b-xs m-r-s" role="tooltip">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </div>
    </div>
  </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">
  <label class="c-label" for="input-disabled-1">Label of Disabled Input</label>
  <input type="text" disabled class="c-input" data-placeholder=".. and Placeholder Text" id="input-disabled-1" name="" value="" />
</div>
<div class="c-float-container">
  <label class="c-label" for="input-disabled-2">Label of Disabled Input</label>
  <input type="text" disabled class="c-input" data-placeholder=".. and Placeholder Text" id="input-disabled-2" name="" value="Default value of disabled input" />
</div>
<div class="h-highlight-block m-t-l">
  <div class="c-float-container -light">
    <label class="c-label" for="input-disabled-3">Label of Disabled Input</label>
    <input type="text" disabled class="c-input" data-placeholder=".. and Placeholder Text" id="input-disabled-3" name="" value="Disabled light input" />
  </div>
</div>

Spotlight

.c-float-container.-has-spotlight

Floating Label

Show Code

<div class="c-float-container -has-spotlight">
  <label class="c-label" for="input-spotlight-example">Floating Label</label>
  <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-spotlight-example" name="" value="" />
</div>

States

Error

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

Floating Label

Floating Label

Show Code

<div class="grid">
  <div class="col">
    <div class="c-float-container -has-error">
      <label class="c-label" for="input-error-1">Floating Label</label>
      <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-error-1" name="" value="" />
    </div>
  </div>
  <div class="col">
    <div class="c-float-container -has-error -is-highlighted">
      <label class="c-label" for="input-error-2">Floating Label</label>
      <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-error-2" name="" value="" />
    </div>
  </div>
</div>

Warning

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

Floating Label

Floating Label

Show Code

<div class="grid">
  <div class="col">
    <div class="c-float-container -has-warning">
      <label class="c-label" for="input-warning-1">Floating Label</label>
      <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-warning-1" name="" value="" />
    </div>
  </div>
  <div class="col">
    <div class="c-float-container -has-warning -is-highlighted">
      <label class="c-label" for="input-warning-2">Floating Label</label>
      <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-warning-2" name="" value="" />
    </div>
  </div>
</div>

Success

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

Floating Label

Floating Label

Show Code

<div class="grid">
  <div class="col">
    <div class="c-float-container -has-success">
      <label class="c-label" for="input-success-1">Floating Label</label>
      <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-success-1" name="" value="" />
    </div>
  </div>
  <div class="col">
    <div class="c-float-container -has-success -is-highlighted">
      <label class="c-label" for="input-success-2">Floating Label</label>
      <input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-success-2" name="" value="" />
    </div>
  </div>
</div>

Number Input

Hide the arrows with .-hide-arrows (not recommended)

Number Input

Number Input Without Arrows

Show Code

<div class="h-flex h-flex-row h-align-start gap-s">
  <div class="c-float-container">
    <label class="c-label" for="input1-number">Number Input</label>
    <input type="number" class="c-input" data-placeholder=".. and Placeholder Text" id="input1-number" name="" value="" />
  </div>
  <div class="c-float-container">
    <label class="c-label" for="input2-number">Number Input Without Arrows</label>
    <input type="number" class="c-input -hide-arrows" data-placeholder=".. and Placeholder Text" id="input2-number" name="" value="" />
  </div>
</div>

With Infotext / Units / Prefixes

.c-float-container > .c-float-container__info

Floating Label

ad

Show Code

<div class="c-float-container">
  <label class="c-label" for="input-icon-prefix">Floating Label</label>
  <input type="text" class="c-input -icon" data-placeholder=".. and Placeholder Text" id="input-icon-prefix" name="" value="" />
  <div class="c-float-container__info">
      ad
  </div>
</div>

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

Floating Label

ml/g

Show Code

<div class="c-float-container">
  <label class="c-label" for="input-icon-suffix">Floating Label</label>
  <input type="text" class="c-input -icon" data-placeholder=".. and Placeholder Text" id="input-icon-suffix" name="" value="" />
  <div class="c-float-container__info -right">
    ml/g
  </div>
</div>