# Forms ## Forms: Standard style ```
``` ## Forms: Bordered style ```
``` ## Forms: Standard layout ``` @full-width
Write anything you like.
Request new email
Add 5
Any number from 1 to 10!
Write more about anything.
This field has no label, which means you really can write what you like.
This field also has no label, but takes up the full width.
``` ## Forms: Standard layout, wide labels ``` @full-width
Your personal email address.
€
per item
The more, the better
Write more about anything.
Selecting these option might be considered a dangerous operation.
``` ## Forms: Multiple fields per row ``` @full-width
Wichtige Daten
One never lies about one's age.
Liter
pro
auf
Colors:
``` ## Forms: Vertical layout ``` @full-width
Write anything you like.
Request new email
unit
Any number from 1 to 10!
Write more about anything.
``` ## Forms: Sections and fieldsets ### standard ```

Advanced information

Even more advanced information
``` ### with controls ```
Various information
(Check all | Uncheck all)
``` ### collapsible ```
Less important information
More important information
``` ## Forms: Column layout ``` @full-width
Write anything you like.
Request new email
Add 5
Any number from 1 to 10!
Write more about anything.
This field has no label, which means you really can write what you like.
``` ## Forms: Width categories The modifier classes **-middle**, **-wide**, ... can be applied to the form-[input type]-container to limit the width of the element. Please note, that this only limits the max-width of the element. The fields will become slimmer if less space is available. Also note, that the max-width is specified as an absolute value. Without a modifier, the form field will take the full width available. ``` @full-width

Input type "text-field"

Input type "text-area"

Input type "select"

``` # Forms: Lists of fields ``` @full-width ``` # Forms: Attachment fieldsets ```
Filesexpanded
Add another file (Maximum size: 5 MB)
``` # Forms: Text fields ## Default text fields ### Standalone ``` ``` ## Text field sizes ``` ``` ## Plain text fields _with no classes applied (uses default Foundation form styling)_ ``` ``` # Forms: Text areas ## Default text areas ### Standalone ``` ``` ## Plain text areas _with no classes applied (uses default Foundation form styling)_ ``` ``` # Forms: Checkboxes ## Default checkboxes ### Standalone ``` ``` ### Within a form ```
``` ### Multiple, within a form ```
``` ## Styled checkboxes [TO BE REFACTORED] ```



``` # Forms: Radio buttons ## Within a form, multiple ```
``` # Forms: Select ## Default selects ### Standalone ``` ``` ``` ``` ``` ``` ### Within a form ```
Oranges are rich in Vitamin C. Eat more than two!
``` ## Select Sizes ``` ``` ## Narrow select _By default, a `form--select` will take the full width of its container element. In most cases it is recommended to apply a width to the container element, but in certain circumstances the `-narrow` variant may be preferable._ ``` ``` ## Plain selects _with no classes applied (uses default Foundation form styling)_ ``` ``` # Forms: Checkbox Matrices ```
Attribute name User access Admin access
Project
Type
Parent
```