Input

An input let users enter and edit text.

The following code examples shows how to use input:

<input type="text" class="input" value="Hello World">

<textarea class="input">
  Hello World
</textarea>

The following list describe all existing block/element/modifier classes of the component.

• .input - required the block class describe a default <input> or <textarea> element
• Modifier
  • .input--invalid - this modifier is used represent an error state
  • .input--valid - this modifier is used represent an successful state
  • .input--stretch use width 100%
  • .input--stretch-{SCREEN_SIZE} width 100% until the screen size
  • .input--scale-{SCALE} scale the size of the input
  • .input--scale-{SCALE}-{SCREEN_SIZE} scale until the screen size

The variables are:

• SCREEN_SIZE lg, md, sm, xs
• SCALE x0.750, x0.875, x1.000, x1.125, x1.250, x1.375, x1.500

The following examples show the basic variants of input fields. One with and without text, as well as one with a placeholder text. The html attributes [disabled], [required] and [readonly] are also shown. Particularly noteworthy are the class modifier .input--valid and .input--invalid. These are set specifically via this modifier.

The invalid state can also be activated using the html attribute type, pattern or require.

Input Types

Various types of inputs are presented below. A text is also displayed.

NOTE: if the [rows] or [cols] attribute is used in a textarea, the respective height or width values are set to auto

Modifier

An input can be customized using class modifiers. The following sub-chapters list all existing classes of input modifier.

Scale

An input with this modifier scale the complete input with text/height/width and every thing else that is based on em units.

The values are to be interpreted as percentages, i.e. a .input--scaling-x0.875 input is smaller as the normal input, while a .input--scaling-x1.500 is larger.

DEPRECATED the old {SCALE} values were 0750, 0875, 1000, 1125, 1250, 1375, 1500

Stretch

The following examples show the stretched input.

Sizing

TODO Create a .input--size input that change the input height without changing the font-size.