4 Form Elements

Form Elements include the layout of a field itself, checkboxes, radio buttons and states of a field. Use these components along with inline help and error state treatements for any form design.

4.1 Input Field

<form>
  <div class="form-group">
    <label for="exampleInputEmail1" class="control-label required">Email address</label>
    <input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Email" required>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1" class="control-label required">Password</label>
    <input type="password" class="form-control input-lg" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputNotRequired" class="control-label">Optional field label</label>
    <input type="password" class="form-control input-lg" id="exampleInputNotRequired" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleTextarea" class="control-label">Bio</label>
    <textarea class="form-control input-lg" id="exampleTextarea" placeholder="I was born..."></textarea>
  </div>
</form>

4.2 Inline Help

Use inline help to guide the user through formular fields. The inline help should be placed below the input field. Keep it short and clear. Avoid more then two lines. Focus on the action required and make it relevant to the user’s current situation.

  • unfamiliar concepts
  • what format the information should be given in
  • where to find further information
This line is reserved for help text
 <form>
   <label class="control-label">Title</label>
   <input type="text" class="form-control">
   <span class="inline-hint-text">This line is reserved for help text</span>
 </form>

4.3 Custom Checkboxes

Checkboxes adhere to typical use; when multiple selections for an item are available. Check Boxes should be placed in proximity to the value needing selection(s).

<div class="checkbox">
 <input type="checkbox" id="optionsCheck1" value="optionc1" checked>
 <label for="optionsCheck1" class="control-label">Check me out</label>
</div>

4.4 Custom Radio buttons

Radio buttons allows to choose only one of a predefined set of options for an item. Radio buttons should be placed in proximity to the value needing selection(s)

<div class="radio">
 <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
 <label for="optionsRadios1" class="control-label">Option one is this and that&mdash;be sure to include why it's great</label>
</div>
<div class="radio">
 <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" >
 <label for="optionsRadios2" class="control-label">Option two can be something else and selecting it will deselect option one </label>
</div>

4.5 Custom Select

Use Select2 for a replacement of the "select" control. It replace the standard "select" markup for custom html and adding the necesary Javascript functionality to make it stylable, accesible and keyboard friendly. Refer to Select2 documentation to see how to implement it.

<label for="customSelect1" class="control-label">Select Print color</label>
<select id="customSelect1" class="form-control input-lg">
  <optgroup label="Primary">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="blue">Yellow</option>
  </optgroup>
  <optgroup label="Secondary">
    <option value="blue">Orange</option>
    <option value="blue">Green</option>
    <option value="blue">Violet</option>
 </optgroup>
</select>

4.6 Read Only Form Elements

Read Only Form Elements share the same styling as the well know input-lg, input-sm size modifier classes. Use them if you want to provide inline text with a label within a form.

Content

input large styling

.form-readonly-text-lg

Content

input small styling

.form-readonly-text-sm

Content

<div class="form-group">
	<label class="control-label">Service name</label>
	<p class="form-readonly-text {$modifiers}">
	Content
	</p>
</div>