Form Group

A forum group is a summary of form elements into one component.

The following code examples shows how to use form group:

<div class="form-group">
  <input type="text" class="input" placeholder="Left '.input'">
  <input type="text" class="input" placeholder="Right '.input'">
</div>

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

• .form-group - required the block class, with which a group of form elements can be grouped together
• .form-group__icon - a special element in which an icon can appear
• .form-group__label - a special element in which a label can appear
• Modifier
  • .form-group--stretch use width 100%
  • .form-group--stretch-{SCREEN_SIZE} width 100% until the screen size
  • .form-group--scale-{SCALE} scale the size of the input
  • .form-group--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

NOTE form groups especially used for complex input elements, like Input Icons.

Basic Example:

Modifier

A form group can be customized using class modifiers. The following sub-chapters list all existing classes of form group modifier.

Scale

An form group with this modifier scale the complete component.

The values are to be interpreted as percentages, i.e. a .floating-label--scaling-x0.875 form group is smaller as the normal form group, while a .floating-label--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 form group.