MOLECULES

Input

Input fields allow the user to interact with by entering data. (e.g. email address, account name, search terms, etc.). Currently, we are not using components for the font inputs. They are implemented by Symfony forms.

Default input

unrefactored
This component is only documented here but is not in a state to be used. Please feel free to refactor it first and document refactored version here before using it.

Fluid:

Responsive:


Material design input

unrefactored
This component is only documented here but is not in a state to be used. Please feel free to refactor it first and document refactored version here before using it.

Fluid:

Responsive:


Password input

unrefactored
This component is only documented here but is not in a state to be used. Please feel free to refactor it first and document refactored version here before using it.

Fluid:

Responsive:


Usage

Name / TypeUsageSelector
One lineInput short texts (e.g. address, name, company name)input type="text"
Multiple linesInput long texts (e.g. NPS on SRP)textarea
Search fieldSearch Input in navigationinput type="text"
Integrated labelCustomer account passwordinput type="text" class="float-label__target-input"

Guidelines

  • ● Input fields can have different status: inactive, active (focus), error, success.
  • ● Some, but not all input fields can have a validation.
  • ● Password inputs have an option to show or hide the input.