Standard Form Layout

Example block-level help text here.

Horizontal Form Layout

Use this format where it makes sense for horizontal forms. Otherwise use the default form layout. If using horizontal forms make sure to add control-label class to the label element

Inline help text

Text Area

Masked Input

Select Box

Checkboxes & Radio & Switches All Checkboxes, Radios and Switch Buttons Are Pure CSS

Pay attention to the coding of checkboxes & radio buttons. Make sure to follow the below steps:

  1. The entire element should be wrapped in the class of the object. For example, in a checkbox the element needs to wrapped in a checkbox
  2. The label element should wrap the entire item.
  3. Add a class of ace directly to the input element
  4. For the actual label add a span element with a class lbl

An Example of a checkbox would look like this:

div class="checkbox premium f-item-check">
input class="ace" name="selectedPaymentCheckBox" type="checkbox" value="false">
span class="lbl">/span>

Price Switcher

Radio Switcher

Custom File Input

Date Picker

Form Inside a Modal Box

Other Form Layouts

Inline Forms

Search Form