Forms

Forms are the most vital groups of elements in modern web applications. Sky Framework uses minimalistic styling for cross-browser visual consistency and provides form template layouts for development teams to provide users with the same user experience regardless the complexity of each form.

• Form controls
  • Input fields
  • Textareas
  • Selects
  • Ranges
  • File browser
  • Form control sizes
  • Form control validation states
  • Form control disabled state
• Input blocks
• Chexkboxes, switches and radios
  • Custom checkboxes, switches and radio components
  • Inline custom checkboxes, switches and radio components
  • Label-less custom checkboxes, switches and radio components
  • Custom checkboxes, switches and radio component sizes
• Form layouts
  • Form layout guidelines
  • Form rows
  • Form columns

Form controls

Since form control elements are commonly used, all native form control elements are styled without the use of additional classes or markup, with the exception of the <input type="e;file"e;> that had great visual incosistencies between browsers and devices and had to be turned to the custom-file component.

Input fields

Input fields allow data entry to be submitted through forms. Input fields should always be placed inside a form element. In this framework by default, input elements are full width blocks, which means that they occupy the full width of their parent container. However by applying the form-control-inline class, the input field can be reset to its initial state.

Code output

HTML Markup

Copy<input type="text" placeholder="Input">
<input class="form-control-inline" type="text" placeholder="Inline input">

The data entry of each input can vary depending on the type attribute. Although any HTML5 type attribute can be used with this framework, many attributes are not supported due to incompatibilities or visual incosistencies amongst browsers, like the type="date" attribute. The supported type attributes by he framework for data entry are the following.

Code Output

HTML Markup

Copy<input type="text" placeholder="Text input">
<input type="email" placeholder="Email input">
<input type="password" placeholder="Password">
<input type="number" placeholder="Number input">
<input type="tel" placeholder="Telephone input">
<input type="url" placeholder="URL input">

The above input fields might look identical when using a desktop browser - with a few exceptions depending on the browser, however, each field provides different context when it comes down to the virtual keyboard on touch devices, so it is suggested to use the corresponding element depending on the use case.

Textareas

Textareas are multi-line text-only data entry fields.

Code output

HTML Markup

Copy<textarea placeholder="Textarea"></textarea>

Selects

Selects create drop-down lists with options.

Code output

HTML Markup

Copy<select>
  <option>Please select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Ranges

Ranges allow users to select a number using a slider.

Code output

HTML Markup

Copy<input type="range">

File browser

The <input type="file"> tag requires additional markup in order to look consistent across all browsers.

Code output

HTML Markup

Copy<label class="custom-file">
  <span>Choose file...</span>
  <input type="file">
</label>

Form control sizes

You can change the size of the input, textarea, select and the custom-file elements, by applying a class form-control-{affix}, where affix can be either lg, sm or xs. The class names are semantic and are irrelevant to the responsive resolution tiers.

Code output

HTML Markup

Copy<input type="text" class="form-control-lg" placeholder="Large input">
<input type="text" placeholder="Normal input">
<input type="text" class="form-control-sm" placeholder="Small input">
<input type="text" class="form-control-xs" placeholder="Extra Small input">

Form control validation states

The framework includes styling for error and success validation states by applying the appropriate classes on any of the above form control elements - input, textarea, select or the custom-file element. Along with the static styling, hover and focus styling change accordingly.

Code output

HTML Markup

Copy<input type="text" class="form-control-success" placeholder="Input field at success state">
<input type="text" class="form-control-error" placeholder="Input field at error state">

Form control disabled state

A disabled state is available when a disabled attributes is applied on any of the above form control elements.

Code output

HTML Markup

Copy<input type="text" placeholder="Input field at success state" disabled>

Input blocks

There are cases where there is need for a block of text to resemble an input field. This can be achieved by applying the class input-block on an span element. A disabled class can also be applied on input blocks to resemble a disabled input field.

All the form-control-{affix} classes mentioned above are also applicable to input blocks.

Code output

HTML5 Markup

Copy<span class="input-block">This span element resembles an input field.</span>
<span class="input-block disabled">This span element resembles a disabled input field.</span>

Checkboxes, switches and radios

Checkboxes allow users to make a selection between a binary set of options - usually true or false, while radios allow users to make selection out of a group of explicit pre-defined values. Checkboxes and radios have been modernized in the Sky Framework by creating custom elements that blend in with the rest of the form elements.

There are use cases where the toggling functionality of a checkbox is needed, but a checkbox is visually alienated in the context, like for example toggling an option in a list item; this might lead the user to believe that the list item is selected as part of a selection group for bulk functions which would not be accurate. This is why switches exist, visual variations of checkboxes, keeping the same functionality.

Custom checkbox, switch and radio components

Checkboxes and switches can accept the form-control-error class for validation purposes; the same validation cannot be applied on radios, because they would validate in all scenarios since at least a value has to be pre-selected.

Code output

HTML Markup

Copy<div class="row">
<div class="col-xs-12 col-sm-4">
  <label class="custom-checkbox">
    <input type="checkbox" value="checkbox1">
    <span>Checkbox</span>
  </label>
  <label class="custom-checkbox">
    <input type="checkbox" value="checkbox2" checked>
    <span>Checkbox checked</span>
  </label>
  <label class="custom-checkbox form-control-error">
    <input type="checkbox" value="checkbox3">
    <span>Checkbox validation error</span>
  </label>
  <label class="custom-checkbox">
    <input type="checkbox" value="checkbox4" disabled>
    <span>Checkbox - disabled</span>
  </label>
</div>
<div class="col-xs-12 col-sm-4">
  <label class="switch">
    <input type="checkbox" value="switch1">
    <span class="lever"></span>
    <span>Switch off</span>
  </label>
  <label class="switch">
    <input type="checkbox" value="switch2" checked>
    <span class="lever"></span>
    <span>Switch on</span>
  </label>
  <label class="switch form-control-error">
    <input type="checkbox" value="switch3">
    <span class="lever"></span>
    <span>Switch error</span>
  </label>
  <label class="switch">
    <input type="checkbox" value="switch4" disabled>
    <span class="lever"></span>
    <span>Switch disabled</span>
  </label>
</div>
<div class="col-xs-12 col-sm-4">
  <label class="custom-radio">
    <input type="radio" name="group1" value="option1" checked>
    <span>One</span>
  </label>
  <label class="custom-radio">
    <input type="radio" name="group1" value="option2">
    <span>Two</span>
  </label>
  <label class="custom-radio">
    <input type="radio" name="group1" value="option3">
    <span>Three</span>
  </label>
  <label class="custom-radio">
    <input type="radio" name="group1" value="option4">
    <span>Four</span>
  </label>
</div>
</div>

Inline custom checkbox, switch and radio components

Groups of checkboxes, switches and radios are vertically stacked by default, but they can easily be stacked horizontally by applying the class form-control-inline on these custom elements.

Code output

HTML Markup

Copy<label class="custom-checkbox form-control-inline">
  <input type="checkbox" value="checkbox1b" checked>
  <span>Checkbox</span>
</label>

<label class="switch form-control-inline">
  <input type="checkbox" value="switch1b" checked>
  <span class="lever"></span>
  <span>Switch off</span>
</label>

<label class="custom-radio form-control-inline">
  <input type="radio" name="group2" value="option1" checked>
  <span>One</span>
</label>

Label-less custom checkbox, switch and radio components

In some cases it is required to use form control elements without labels, like for example in selectable rows of a table. In such cases applying a class no-label to the specified component will hide the label.

Code output

HTML Markup

Copy<label class="custom-checkbox no-label">
  <input type="checkbox" value="checkbox1c" checked>
  <span>Checkbox</span>
</label>

<label class="switch no-label">
  <input type="checkbox" value="switch1c" checked>
  <span class="lever"></span>
  <span>Switch off</span>
</label>

<label class="custom-radio no-label">
  <input type="radio" name="group3" value="option1" checked>
  <span>One</span>
</label>

Custom checkbox, switch and radio component sizes

You can change the size of every custom component, by applying a class form-control-{affix}, where affix can be either lg, sm or xs. The class names are semantic and are irrelevant to the responsive resolution tiers.

Code output

HTML5 Markup

Copy<div class="row">
<div class="col-xs-12 col-sm-4">
  <label class="custom-checkbox form-control-lg">
    <input id="checkbox1b" type="checkbox" checked>
    <span>Large checkbox</span>
  </label>
  <label class="custom-checkbox">
    <input id="checkbox2b" type="checkbox" checked>
    <span>Normal checkbox</span>
  </label>
  <label class="custom-checkbox form-control-sm">
    <input id="checkbox3b" type="checkbox" checked>
    <span>Small checkbox</span>
  </label>
  <label class="custom-checkbox form-control-xs">
    <input id="checkbox4b" type="checkbox" checked>
    <span>Extra small checkbox</span>
  </label>
</div>
<div class="col-xs-12 col-sm-4">
  <label class="switch form-control-lg">
    <input id="switch1b" type="checkbox" checked>
    <span class="lever"></span>
    <span>Large switch</span>
  </label>
  <label class="switch">
    <input id="switch2b" type="checkbox" checked>
    <span class="lever"></span>
    <span>Normal switch</span>
  </label>
  <label class="switch form-control-sm">
    <input id="switch3b" type="checkbox" checked>
    <span class="lever"></span>
    <span>Small switch</span>
  </label>
  <label class="switch form-control-xs">
    <input id="switch4b" type="checkbox" checked>
    <span class="lever"></span>
    <span>Extra small switch</span>
  </label>
</div>
<div class="col-xs-12 col-sm-4">
  <label class="custom-radio form-control-lg">
    <input type="radio" name="radio2" value="option1" checked>
    <span>One</span>
  </label>
  <label class="custom-radio">
    <input type="radio" name="radio3" value="option2" checked>
    <span>Two</span>
  </label>
  <label class="custom-radio form-control-sm">
    <input type="radio" name="radio4" value="option3" checked>
    <span>Three</span>
  </label>
  <label class="custom-radio form-control-xs">
    <input type="radio" name="radio5" value="option4" checked>
    <span>Four</span>
  </label>
</div>
</div>

Form layouts

Form layouts are constructed out of form groups and buttons. A form group is a combination of one or more form control elements or components along with their respective labels.

Form groups are divided in two variations: the form row and the form column. In a form-row the label and form control are horizontally stacked, while in a form column the label and form control are vertically stacked.

Each form group has its pros and cons; form rows are considered slower to parse, but make users less prone to accidentally skipping input fields; form columns on the other hand are faster to parse (if there is one field per row), but in large width layouts they become visually awkward.

Form rows change their stacking orientation at small resolution tiers and turn into form columns to overcome obvious space constraints. As a result, at small screen resolution tiers, both form layouts - either form row layouts or form column layouts - are visually identical.

Sky Framework recommends and encourages the use of form rows whenever possible and when the layout width allows it; form columns use is recommended when the form width is limited due to layout constraints; an example use case would be the use of form groups in a sidebar. Creating uniform and consistent form layouts across all developed applications provide users with a sense of confidence and make them less nervous while filling in complex forms.

Form layout guidelines

The following guidelines should be taken under consideration to ensure consistency amongst all forms.

• Mandatory fields should be indicated by an asterisk * and the label contents should be wrapped in a strong tag.
• In cases of radio buttons, if there are more than 5 radios to choose from, the use of a select element is recommended.
• Labels should be kept clear, simple and as short as possible to keep form clutter to a minimum.
• Use of the placeholder attribute to describe how the data entry should be input in input fields is encouraged.
• Optional descriptions should be scarcely used and only when the label and placeholder are not enough to provide users with enough information on how to fill-in the field, so that the user is not exposed to information noise especially in long and complex forms.
• If there is an optional description below a field, in case of a validation error it is recommended that the error message replaces the optional message.
• If you need to break the form into multiple parts, use a thematic break hr. The use of a heading after the thematic break is encouraged.
• It is strongly recommended that only one form control size is used per form layout to prevent visual inconsistencies.

Form rows

A form row is a form group that contains a label and one or more form control type elements - or groups of elements in cases of using checkboxes, switches or radios - stacked horizontally. A form is created out of multiple form rows. As mentioned above, form rows change their stacking orientation at small resolution tiers and turn into form columns to overcome obvious space constraints.

The following guidelines are applicable only to form rows and should also be considered when designing a form.

• Depending on the length of the data to be input in a multi-input form row, up to 3 form-row-input elements are allowed, but it is recommended that no more than 2 are used for the same form row; one form-row-input consumes the full form row width, excluding the label width, 2 consume 50% each, 3 consume ~33% each. In case more fields are needed, then divide the group in multiple form rows.
• If there are less than 2 checkboxes or radios within the form-row-input they should be inline by applying the form-control-inline class. For 3 or more, the default vertical stacking is recommended.

Code output

HTML Markup

Copy<div class="form-row">
  <label for="e-input-0">Label</label>
  <div class="form-row-input">
    <input type="text" id="e-input-0" placeholder="Sample input field">
    <p>Optional field description or error</p>
  </div>
</div>

Sample form with form rows

The HTML markup tab below contains a 1:1 replication of the sample form shown below, while the individual form rows contain generic form rows without optional messages or error states.

Copy<form>
  <div class="box pad-lg">
    <h3 class="box-title">Form title</h3>

    <div class="form-row">
      <label for="e-input"><strong>* Input field</strong></label>
      <div class="form-row-input">
        <input type="text" id="e-input" placeholder="Input field">
      </div>
    </div>

    <div class="form-row">
      <label for="e-email"><strong>* Email field</strong></label>
      <div class="form-row-input">
        <input type="email" id="e-email" placeholder="eg address@domain.com">
        <p>Optional field description.</p>
      </div>
    </div>

    <div class="form-row">
      <label for="e-textarea">Textarea</label>
      <div class="form-row-input">
        <textarea id="e-textarea" placeholder="Textarea"></textarea>
      </div>
    </div>

    <div class="form-row">
      <label>Select</label>
      <div class="form-row-input">
        <select>
          <option>Select an option</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
      </div>
    </div>

    <div class="form-row">
      <label for="e-range">Range slider</label>
      <div class="form-row-input">
        <input id="e-range" type="range">
      </div>
    </div>

    <div class="form-row">
      <label for="e-upload">File upload</label>
      <div class="form-row-input">
        <label class="custom-file">
          <span>Choose file...</span>
          <input id="e-upload" type="file">
        </label>
        <p>Only JPG files allowed</p>
      </div>
    </div>

    <div class="form-row">
      <label for="e-minput">Multi-field</label>
      <div class="form-row-input">
        <input type="text" class="form-control-error" id="e-minput" placeholder="Input field">
        <p class="error">Error description</p>
      </div>
      <div class="form-row-input">
        <input type="text" placeholder="Input field">
        <p>Optional description</p>
      </div>
      <div class="form-row-input">
        <select>
          <option>Select an option</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
        <p>Optional description</p>
      </div>
    </div>

    <div class="form-row">
      <label>Checkboxes</label>
      <div class="form-row-input">
          <label class="custom-checkbox form-control-inline">
          <input type="checkbox" value="checkbox1">
        <span>Checkbox</span>
        </label>
        <label class="custom-checkbox form-control-inline">
          <input type="checkbox" value="checkbox2">
          <span>Checkbox</span>
        </label>
        <p>Sample checkbox text</p>
      </div>
    </div>

    <div class="form-row">
      <label>Radio buttons</label>
      <div class="form-row-input">
        <label class="custom-radio form-control-inline">
          <input name="groupname" type="radio" value="radio1" checked>
          <span>Radio 1</span>
        </label>
        <label class="custom-radio form-control-inline">
          <input name="groupname" type="radio" value="radio2">
          <span>Radio 2</span>
        </label>
      </div>
    </div>

    <div class="form-row">
      <label>Dropdown</label>
      <div class="form-row-input">
        <div class="dropdown dropdown-form-control">
          <input class="btn btn-dropdown-toggle" data-toggle="dropdown" value="Dropdown" readonly>
          <ul class="dropdown-menu">
            <li><a href=#>Option 1</a></li>
            <li><a href=#>Option 2</a></li>
            <li><a href=#>Option 3</a></li>
            <li><a href=#>Option 4</a></li>
            <li><a href=#>Option 5</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="form-row">
      <label>Calendar</label>
      <div class="form-row-input">
        <div id="calendar-1" class="calendar"></div>
      </div>
    </div>

    <div class="form-row">
      <label for="e-input-group">Input group</label>
      <div class="form-row-input">
        <div class="input-group">
          <input type="text" id="e-input-group" placeholder="Input field">
          <div class="input-extension">
            <button class="btn btn-sec">Button</button>
          </div>
        </div>
      </div>
    </div>

    <div class="spacer"></div>

    <h3 class="box-title">Additional form fields</h3>

    <div class="form-row">
      <label for="e-number">Number field</label>
      <div class="form-row-input">
        <input type="number" id="e-number" placeholder="Number field">
      </div>
    </div>

    <div class="form-row">
      <label for="e-tel">Telephone field</label>
      <div class="form-row-input">
        <input type="tel" id="e-tel" placeholder="Telephone field">
      </div>
    </div>

    <div class="form-row">
      <label for="e-password">Password field</label>
      <div class="form-row-input">
        <input type="password" id="e-password" placeholder="Password field" value="mypassword">
      </div>
    </div>

    <div class="box-actions-footer">
      <button class="btn btn-faded">Cancel</button>
      <button type="submit" class="btn btn-main">Submit <strong>form</strong></button>
    </div>
  </div>
</form>

Copy<div class="form-row">
  <label for="e-input">Input field</label>
  <div class="form-row-input">
    <input type="text" id="e-input" placeholder="Input field">
  </div>
</div>

Copy<div class="form-row">
  <label for="e-textarea">Textarea</label>
  <div class="form-row-input">
    <textarea id="e-textarea" placeholder="Textarea"></textarea>
  </div>
</div>

Copy<div class="form-row">
  <label>Select</label>
  <div class="form-row-input">
    <select>
      <option>Select an option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>
</div>

Copy<div class="form-row">
  <label for="e-range">Range slider</label>
  <div class="form-row-input">
    <input id="e-range" type="range">
  </div>
</div>

Copy<div class="form-row">
  <label for="e-upload">File upload</label>
  <div class="form-row-input">
    <label class="custom-file">
      <span>Choose file...</span>
      <input id="e-upload" type="file">
    </label>
    <p>Only JPG files allowed</p>
  </div>
</div>

Copy<div class="form-row">
  <label for="e-minput">Multi-field</label>
  <div class="form-row-input">
    <input type="text" id="e-minput" placeholder="Input field">
  </div>
  <div class="form-row-input">
    <input type="text" placeholder="Input field">
  </div>
  <div class="form-row-input">
    <select>
      <option>Select an option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>
</div>

Copy<div class="form-row">
  <label>Checkboxes</label>
  <div class="form-row-input">
    <label class="custom-checkbox form-control-inline">
      <input type="checkbox" value="checkbox1">
      <span>Checkbox</span>
    </label>
    <label class="custom-checkbox form-control-inline">
      <input type="checkbox" value="checkbox2">
      <span>Checkbox</span>
    </label>
  </div>
</div>

Copy<div class="form-row">
  <label>Radio buttons</label>
  <div class="form-row-input">
    <label class="custom-radio form-control-inline">
      <input name="groupname" type="radio" value="radio1" checked>
      <span>Radio</span>
    </label>
    <label class="custom-radio form-control-inline">
      <input name="groupname" type="radio" value="radio2">
      <span>Radio</span>
    </label>
  </div>
</div>

Copy<div class="form-row">
  <label>Dropdown</label>
  <div class="form-row-input">
    <div class="dropdown dropdown-form-control">
      <input class="btn btn-dropdown-toggle" data-toggle="dropdown" value="Dropdown" readonly>
      <ul class="dropdown-menu">
        <li><a href=#>Option 1</a></li>
        <li><a href=#>Option 2</a></li>
        <li><a href=#>Option 3</a></li>
        <li><a href=#>Option 4</a></li>
        <li><a href=#>Option 5</a></li>
      </ul>
    </div>
  </div>
</div>

Copy<div class="form-row">
  <label>Calendar</label>
  <div class="form-row-input">
    <div id="calendar-1" class="calendar"></div>
  </div>
</div>

Copy<div class="form-row">
  <label for="e-input-group">Input group</label>
  <div class="form-row-input">
    <div class="input-group">
      <input type="text" id="e-input-group" placeholder="Input field">
      <div class="input-extension">
        <button class="btn btn-sec">Button</button>
      </div>
    </div>
  </div>
</div>

Form columns

A form row is a form group that contains a label and one or more form control type elements - or groups of elements in cases of using checkboxes, switches or radios - stacked vertically.

Form columns use less markup than form rows and can be used in conjuction with the responsive grid system that makes them more versatile. However, extensinve use of the grid system can lead to cluttered and dense forms, often causing anxiety to users. Moreover, optional field descriptions or validation error messages breaking a form column layout is a common issue, leading to line wrapping and misaligned form elements.

The following guidelines are applicable only to form columns and should be considered when designing a form.

• The grid system within a form should be used with extreme caution; the grid columns should have enough width to accommodate all form column content, including full label width, optional descriptions and validation error messages. It is recommended not to use more than 3 grid columns inline. Test grid systems in forms thoroughly before publishing to be certain that no wrapping, uneven grid column alignment or invisible content occurs.
• It is recommended that grid columns used inline should occupy no less than 4 grid spaces - col-{affix}-1, col-{affix}-2 and col-{affix}-3 should be avoided at all screen resolution tiers.

Sample form with form columns

The HTML markup tab below contains a 1:1 replication of the sample form shown below, while the individual form rows contain generic form rows without optional messages or error states.

Copy<form>
  <div class="box pad-md">
    <h3 class="box-title">Form title</h3>

    <div class="form-col">
      <label for="e-input-3"><strong>* Input field</strong></label>
      <input type="text" id="e-input-3" placeholder="Input field">
    </div>

    <div class="form-col">
      <label for="e-email-2"><strong>* Email field</strong></label>
      <input type="email" id="e-email-2" placeholder="eg address@domain.com">
      <p>Optional field description.</p>
    </div>

    <div class="form-col">
      <label for="e-textarea-2">Textarea</label>
      <textarea id="e-textarea-2" placeholder="Textarea"></textarea>
    </div>

    <div class="form-col">
      <label>Select</label>
      <select>
        <option>Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </div>

    <div class="form-col">
      <label for="e-range-2">Range slider</label>
      <input id="e-range-2" type="range">
    </div>

    <div class="form-col">
    <label for="e-upload-2">File upload</label>
      <label class="custom-file">
        <span>Choose file...</span>
        <input id="e-upload-2" type="file">
      </label>
      <p>Only JPG files allowed</p>
    </div>

    <div class="row">
      <div class="col-xs-12 col-sm-4">
        <div class="form-col">
          <label for="e-minput-2">Multi-field 1</label>
          <input type="text" class="form-control-error" id="e-minput-2" placeholder="Input field">
          <p class="error">Error description</p>
        </div>
      </div>
      <div class="col-xs-12 col-sm-4">
        <div class="form-col">
          <label for="e-minput-3">Multi-field 2</label>
          <input type="text" id="e-minput-3" placeholder="Input field">
          <p>Optional description</p>
        </div>
      </div>
      <div class="col-xs-12 col-sm-4">
        <div class="form-col">
          <label>Multi-field 3</label>
          <select>
            <option>Select an option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
          <p>Optional description</p>
        </div>
      </div>
    </div>

    <div class="form-col">
      <label>Checkboxes</label>
      <label class="custom-checkbox">
        <input type="checkbox" value="checkbox3">
        <span>Checkbox</span>
      </label>
      <label class="custom-checkbox">
        <input type="checkbox" value="checkbox4">
        <span>Checkbox</span>
      </label>
      <p>Sample checkbox text</p>
    </div>

    <div class="form-col">
      <label>Radio buttons</label>
      <label class="custom-radio">
        <input name="radiogroup2" type="radio" value="radio3" checked>
        <span>Radio 1</span>
      </label>
      <label class="custom-radio">
        <input name="radiogroup2" type="radio" value="radio4">
        <span>Radio 2</span>
      </label>
    </div>

    <div class="form-col">
      <label>Dropdown</label>
      <div class="dropdown dropdown-form-control">
        <input class="btn btn-dropdown-toggle" data-toggle="dropdown" value="Form control dropdown" readonly>
        <ul class="dropdown-menu">
          <li><a href=#>Option 1</a></li>
          <li><a href=#>Option 2</a></li>
          <li><a href=#>Option 3</a></li>
          <li><a href=#>Option 4</a></li>
          <li><a href=#>Option 5</a></li>
        </ul>
      </div>
    </div>

    <div class="form-col">
      <label>Calendar</label>
      <div id="calendar-2" class="calendar"></div>
    </div>

    <div class="form-col">
      <label for="e-input-group-2">Input group</label>
      <div class="input-group">
        <input type="text" id="e-input-group-2" placeholder="Input field">
        <div class="input-extension">
          <button class="btn btn-sec">Button</button>
        </div>
      </div>
    </div>

    <div class="spacer"></div>

    <h3 class="box-title">Additional form fields</h3>

    <div class="form-col">
      <label for="e-number-2">Number field</label>
      <input type="number" id="e-number-2" placeholder="Number field">
    </div>

    <div class="form-col">
      <label for="e-tel-2">Telephone field</label>
      <input type="tel" id="e-tel-2" placeholder="Telephone field">
    </div>

    <div class="form-col">
      <label for="e-password-2">Password field</label>
      <input type="password" id="e-password-2" placeholder="Password field" value="mypassword">
    </div>

    <div class="box-actions-footer">
      <button class="btn btn-faded">Cancel</button>
      <button type="submit" class="btn btn-main">Submit <strong>form</strong></button>
    </div>
  </div>
</form>

Copy<div class="form-col">
  <label for="e-input-3">Input field</label>
  <input type="text" id="e-input-3" placeholder="Input field">
</div>

Copy<div class="form-col">
  <label for="e-textarea-2">Textarea</label>
  <textarea id="e-textarea-2" placeholder="Textarea"></textarea>
</div>

Copy<div class="form-col">
  <label>Select</label>
  <select>
    <option>Select an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

Copy<div class="form-col">
  <label for="e-range-2">Range slider</label>
  <input id="e-range-2" type="range">
</div>

Copy<div class="form-col">
  <label for="e-upload-2">File upload</label>
  <label class="custom-file">
    <span>Choose file...</span>
    <input id="e-upload-2" type="file">
  </label>
  <p>Only JPG files allowed</p>
</div>

Copy<div class="row">
  <div class="col-xs-12 col-sm-4">
    <div class="form-col">
      <label for="e-minput-2">Multi-field 1</label>
      <input type="text" id="e-minput-2" placeholder="Input field">
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="form-col">
      <label for="e-minput-3">Multi-field 2</label>
      <input type="text" id="e-minput-3" placeholder="Input field">
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="form-col">
      <label>Multi-field 3</label>
      <select>
        <option>Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </div>
  </div>
</div>

Copy<div class="form-col">
  <label>Checkboxes</label>
  <label class="custom-checkbox">
    <input type="checkbox" value="checkbox3">
    <span>Checkbox</span>
  </label>
  <label class="custom-checkbox">
    <input type="checkbox" value="checkbox4">
    <span>Checkbox</span>
  </label>
</div>

Copy<div class="form-col">
  <label>Radio buttons</label>
  <label class="custom-radio">
    <input name="radiogroup2" type="radio" value="radio3" checked>
    <span>Radio 1</span>
  </label>
  <label class="custom-radio">
    <input name="radiogroup2" type="radio" value="radio4">
    <span>Radio 2</span>
  </label>
</div>

Copy<div class="form-col">
  <label>Dropdown</label>
  <div class="dropdown dropdown-form-control">
    <input class="btn btn-dropdown-toggle" data-toggle="dropdown" value="Form control dropdown" readonly>
    <ul class="dropdown-menu">
      <li><a href=#>Option 1</a></li>
      <li><a href=#>Option 2</a></li>
      <li><a href=#>Option 3</a></li>
      <li><a href=#>Option 4</a></li>
      <li><a href=#>Option 5</a></li>
    </ul>
  </div>
</div>

Copy<div class="form-col">
  <label>Calendar</label>
  <div id="calendar-2" class="calendar"></div>
</div>

Copy<div class="form-col">
  <label for="e-input-group-2">Input group</label>
  <div class="input-group">
    <input type="text" id="e-input-group-2" placeholder="Input field">
    <div class="input-extension">
      <button class="btn btn-sec">Button</button>
    </div>
  </div>
</div>