Text controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <input> tag, and classes should follow on from the surrounding <div>.

    
      <div class="form-group">
      <label for="<!-- Input control ID goes here -->"><!-- Label text goes here -->:</label>
      <input type="text" class="form-control" id="<!-- Input control ID goes here -->"
      name="<!-- Input control name goes here -->" placeholder="Enter text" value="<!--
      Input control value goes here -->">
      </div>
    
  

Example code for error message:

    
      <div class="form-group invalid error">
        <label for="text-field1c">Text:</label>
        <input type="text" class="form-control" id="text-field1c" name="text_field1c" placeholder="Enter text" value="">

        <span class="error-message">Error message.</span>
      </div>
    
  

Textarea controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <textarea> tag, and classes should follow on from the surrounding <div>.

  <div class="form-group">
    <label for="<!-- Textarea control ID goes here -->"><!-- Label text goes here -->:</label>
    <textarea class="form-control" rows="5" id="<!-- Textarea control ID goes here -->" name="<!-- Textarea control name goes here -->" placeholder="Enter text">
      <!-- Textarea control value goes here -->
    </textarea>
  </div>

Password controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <input> tag, and classes should follow on from the surrounding <div>.

    
      <div class="form-group">
        <label for="<!-- Input control ID goes here -->"><!-- Label text goes here -->:</label>
        <input type="password" class="form-control" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" placeholder="Enter password" value="">
      </div>
    
  

For security reasons the password field should never have the value attribute populated. The only potential exception would be if the control is set to be read only in which case a string containing a number of asterisks would be appropriate eg: "********".

File controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the text <input> tag, and classes should follow on from the surrounding <div>.

    
  <div class="form-row">
    <div class="form-group file-input">
      <label for="file-field1a" class="control-label">File:</label>
      <div class="control-input">
        <input type="file" class="form-control file-input-file sr-only" id="file-field1a" name="file_field1a">
        <input type="hidden" class="file-input-remove" id="file-field1a-remove" name="file_field1a_remove" value="0">
        <input type="text" class="form-control file-input-text" id="file-field1a-text" placeholder="Path / Filename" value="">
        <label for="file-field1a" class="btn btn-text btn-file btn-file-choose">Choose File</label>
        <button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
      </div>
    </div>
  </div>
    
  

Email controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <input> tag, and classes should follow on from the surrounding <div>.

    
      <div class="form-group">
        <label for="<!-- Input control ID goes here -->" class="control-label"><!-- Label text goes here -->:</label>
        <div class="control-input">
          <input type="email" class="form-control" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" placeholder="Enter email" value="<!-- Input control value goes here -->">
        </div>
      </div>
    
  

Hyperlink controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to both of the <input> tags, and classes should follow on from the surrounding <div>.

    
      <div class="form-group">
        <label for="<!-- Link input control ID goes here -->" class="control-label"><!-- Link label text goes here -->:</label>
        <div class="control-input">
          <input type="url" class="form-control" id="<!-- Link input control ID goes here -->" name="<!-- Link input control name goes here -->" placeholder="Enter url" value="<!-- Link input control value goes here -->">
        </div>
        <div class="form-control-spacer"></div>
        <label for="<!-- Title input control ID goes here -->" class="control-label"><!-- Title label text goes here -->:</label>
        <div class="control-input">
          <input type="text" class="form-control" id="<!-- Title input control ID goes here -->" name="<!-- Title input control name goes here -->" placeholder="Enter title" value="<!-- Title input control value goes here -->">
        </div>
      </div>
    
  

Telephone controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to all of the <input> tags, and classes should follow on from the surrounding <div>.

    
      <div class="form-group formatted-telephone">
        <label for="<!-- Country input control ID goes here -->">Telephone:</label>
        <input type="text" class="form-control formatted-telephone-country" id="<!-- Country input control ID goes here -->" name="<!-- Country input control name goes here -->" placeholder="+44" value="<!-- Country input control value goes here -->">
        <input type="text" class="form-control formatted-telephone-area" id="<!-- Area input control ID goes here -->" name="<!-- Area input control name goes here -->" placeholder="121" value="<!-- Area input control value goes here -->">
        <input type="text" class="form-control formatted-telephone-number" id="<!-- Number input control ID goes here -->" name="<!-- Number input control name goes here -->" placeholder="123 4567" value="<!-- Number input control value goes here -->">
      </div>
    
  

Checkbox controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the <input> tag, and classes should follow on from the surrounding <div> and <label>.

    
      <div class="form-group checkbox">
        <input type="checkbox" class="form-control" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" value="">
        <label for="<!-- Input control ID goes here -->">
          <span class="checkbox-icon"></span>
          <!-- Label text goes here -->
        </label>
      </div>
    
  

Tristate controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the <input> tag, and classes should follow on from the surrounding <div> and <label>.

    
      <div class="form-group tristate">
        <input type="hidden" class="value" value="<!-- Input value goes here -->">
        <input type="hidden" class="altvalue"  value="<!-- Input alternate value goes here -->">
        <input type="checkbox" class="form-control" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" value="<!-- Input selected value goes here -->">
        <label for="<!-- Input control ID goes here -->">
          <span class="checkbox-icon"></span>
          Tristate
        </label>
      </div>
    
  

Radiobutton controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the <input> tag, and classes should follow on from the surrounding <div> and <label>.

    
      <div class="form-group radio">
        <input type="radio" class="form-control" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" value="">
        <label for="<!-- Input control ID goes here -->">
          <span class="radio-icon"></span>
          <!-- Label text goes here -->
        </label>
      </div>
    
  

Radiobutton controls also can contain custom values as demonstrated below.

    
      <div class="form-group radio label-first">
        <input type="radio" class="form-control" id="<!-- First input control ID goes here -->" name="<!-- Input control name goes here -->" value="1">
        <label for="<!-- First input control ID goes here -->">
          <span class="radio-icon"></span>
          <!-- Label text goes here -->
        </label>
        <input type="text" class="form-control" name="<!-- Input text control name goes here -->" value="" />
      </div>
      <div class="form-group radio invalid">
        <input type="radio" class="form-control" id="<!-- Second input control ID goes here -->" name="<!-- Input control name goes here -->" value="2">
        <label for="<!-- Second input control ID goes here -->" class="invalid">
          <span class="radio-icon"></span>
          <!-- Label text goes here -->
        </label>
        <input type="text" class="form-control" name="<!-- Input text control name goes here -->" value="" />
      </div>
    
  

Time controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <input> tag, and classes should follow on from the surrounding <div>.

    
      <div class="form-group time">
        <label for="<!-- Input control ID goes here -->"><!-- Label text goes here -->:</label>
        <div class="control-input">
          <input type="text" class="form-control time" id="<!-- Input control ID goes here -->" name="<!-- Input control name goes here -->" placeholder="Enter time" value="<!-- Input control value goes here -->">
          <span class="add-on">
            <span class="glyphicon glyphicon-time"></span>
          </span>
        </div>
      </div>
    
  

Image controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <button> tag, and classes should follow on from the surrounding <div>.

The control contains an <img> tag to display either a relevant placeholder or a preview of the currently uploaded file.

Currently, 2 placeholder images have been included, namely image_placeholder.png and image_placeholderb.png

Style	Attribute	Value	Standard Example
Standard
Disabled	class disabled	disabled disabled
Invalid	class	invalid
Read Only	class readonly	readonly readonly

    
      <form role="form">
        <div class="form-row">
          <div class="form-group image-input">
            <input type="file" class="form-control file-input-image sr-only" id="image-field1a" name="image_field1a">

            <div class="image-display-wrapper">
              <img class="image-input-image" alt="" src="images/image_placeholder.png" />
            </div>
            <label for="image-field1a" class="btn btn-icon btn-default btn-file-choose">
              <span class="glyphicon glyphicon-search"></span>
            </label>

          </div>
        </div>
      </form>
    
  

A Spin Box is used to adjust or change value in the adjoining text box by either clicking on the up or down arrow.

You can use different data attributes on <input type="text" class="form-control">to set some default behaviour to the Spin Box

data-spin-min="-10" to set minimum allowed value. Default is 0

data-spin-max="10" to set maximum allowed value. Default is 100

data-spin-steps="2" to set increment/ decrement steps. Default is 1

data-spin-value="8" to set initial value.

data-spin-decimals="2" to set allowed decimal value. Default is 0

Example:

Form Horizontal

  <form class="form-horizontal">
    <div class="form-row">
      <div class="form-group spin-box">
        <label for="number1" class="control-label">Number: </label>
        <div class="control-input">
          <input type="text" id="number1" class="form-control" data-spin-min="-10" data-spin-max="10" data-spin-steps="2">
        </div>
      </div>
    </div>
  </form>
  

Form Inline

  <form class="form-inline">
    <div class="form-row">
      <div class="form-group spin-box">
        <label for="number2" class="control-label">Number: </label>
        <div class="control-input">
          <input type="text" id="number2" class="form-control">
        </div>
      </div>
    </div>
  </form>
  

Disabled

  <form class="form-horizontal">
    <div class="form-row">
      <div class="form-group spin-box disabled">
        <label for="number3" class="control-label">Number: </label>
        <div class="control-input">
          <input type="text" id="number3" class="form-control" disabled="disabled">
        </div>
      </div>
    </div>
  </form>
  

Invalid

  <form class="form-horizontal">
    <div class="form-row">
      <div class="form-group spin-box invalid">
        <label for="number4" class="control-label">Number: </label>
        <div class="control-input">
          <input type="text" id="number4" class="form-control">
        </div>
      </div>
    </div>
  </form>
  

A color component allows user to select a color within the application.

Default

    <form>
    <div class="form-group color">
      <label for="color1">Select a color: </label>
      <div class="input-group">
        <input type="text" id="color1" class="form-control" value='#cc3333'/>
        <span class="color-drop"></span>
        <span class="add-on"><span class="color-picker"></span></span>
      </div>
    </div>
    <div class="form-group color">
      <label for="color2">Select a color: </label>
      <div class="input-group">
        <input type="text" id="color2" class="form-control" value='red' data-color-set='{"colors":"ffffff, ebebeb, e1e1e1, d7d7d7, cccccc, c2c2c2, b7b7b7, acacac, a0a0a0, 959595, 898989, 7d7d7d, 707070, 626262, 555555, 464646, 363636, 262626, 111111, 000000"}'/>
        <span class="color-drop"></span>
        <span class="add-on"><span class="color-picker"></span></span>
      </div>
    </div>
  </form>
  

A color component allows user to select a color within the application.

Default

The Select Shuttle component is used to move items from one list to another, typically between "Available" list to a "Selected" list.