The following form controls classes are supported:

• .label
• .input
• .textarea
• .select
• .checkbox
• .radio
• .button
• .help

Each of them should be wrapped in a .control container.
When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

Form field

The field container is a simple container for:

• a text label
• a form control
• an optional helptext

This container allows form fields to be spaced consistently.

Form control

The control is a versatile container meant to enhance single form controls. Because it has the same height as a control elements, it can only contain the following elements:

• input
• select
• button
• icon

With icons

You can append one of 2 modifiers on a control:

• has-icons-left
• and/or has-icons-right

You also need to add a modifier on the icon:

• icon is-left if has-icons-left is used
• icon is-right if has-icons-right is used

The size of the input will define the size of the icon container.

Form addons

If you want to attach controls together, use the has-addons modifier on the field container:

Horizontal form

If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:

• field-label for the side label
• field-body for the input/select/textarea container

You can use is-grouped or has-addons for the child elements.