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.

Selection

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.

Switch

This is a simple, yet elegant, boolean switch.

Radio

These are simple radio buttons. You may group them.

Checkboxes

These are simple checkboxes. You may group them.

Textarea

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.