Form elements

Generic form elements are a collection of different objects needed to build a typical online form. From basic input fields over dropdown selections up to switches. They can be combined to logical groups with the help of form-group or input-group. Form groups are sets of different options/fields that belong to one category (e.g. an address with street, zip and city), whereas input groups are different types of elements that belong to one option/field (e.g. a label, an input and a button).

Source Code

To initialize form elements on this site we used this piece of less.

/* enable forms */ .input { .genericInput(); } .label { .genericLabel(); } .select { .genericSelect(); } .textarea { .genericTextarea(); } .switch { .genericSwitch(); } .radio { .genericRadio(); } .check { .genericCheck(); } .option-group { .genericOption-group(); } .input-group { .genericInput-group(); } .form { .genericForm(); }

Default Form

This is a standard form.

This is an informative note.


This is a select menu.

Small selection

This is a small select menu.

Input connected with button

This is an input directly connected to a button.

Small input

This is a small input.

Large input

This is a large input.

Disabled and read-only inputs

This is a disabled and a read-only input.

Error, recommended and accepted on input

These are examples for an error, a recommendation and an accepted status.


This is a simple, yet elegant, boolean switch.


These are simple radio buttons. You may group them.


These are simple checkboxes. You may group them.


This is an example of a textarea.

Form actions with bar

Use .bar to float submit buttons to the right at the end of your form.