forms.less

horizontal form

Explainatory Text

inline form
inline checkboxes
Input heights

Content

  1. Basic rules and example
  2. Horizontal forms
  3. Inline forms
  4. Checkboxes & radio buttons
  5. Helper text
  6. Size & height
  7. Input states

Global input width

All inputs will span 100% of the available width. The only exception are inputs of inline forms. This is caused by a mobile first design approach.

Inputs should always be contained within a form node. If a form contains more than two inputs, a fieldset should span the inputs too, for semenatical reaons. Within a horizontal form, all connected inputs and labels should be surrounded by a .form-group node for spacing reasons. Furthermore the legend should work as a headline for a form, describing its function. This is how a basic form should look like:

Default form
<form>
  <fieldset>
    <legend>Default form</legend>
    <div class="form-group">
      <label for="exampleInputEmail">Email</label>
      <input type="text" id="exampleInputEmail" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword">Password</label>
      <input type="password" id="exampleInputPassword" placeholder="Password">
    </div>
    <label class="checkbox">
      <input type="checkbox"> Check me out
    </label>
    <button type="submit">Submit</button>
  </fieldset>
</form>

Horizontal forms

Horizontally aligned label & input forms require some extra classes and nodes. The basic layout relies on the grid classes. The form itself requires a class .form-horizontal. All .form-group elements work as the rows of the grid.

All input elements need one additional div parent node with the grid classes. To make all labels right align the text, labels require .control-label.

This type of form rarely works on small screen devices, so all grid classes used here, should only work for medium & large screens.

Default form
<form class="form-horizontal">
  <fieldset>
    <legend>Default form</legend>
    <div class="form-group">
      <label class="col-medium-3 control-label">Email</label>
      <div class="col-medium-9">
        <input type="text">
      </div>
    </div>
    <div class="form-group">
      <label class="col-medium-3 control-label">Password</label>
      <div class="col-medium-9">
        <input type="password">
      </div>
    </div>
    <div class="form-group">
      <div class="col-medium-9 col-offset-3">
        <label class="checkbox">
          <input type="checkbox"> Check me out
        </label>
        <button type="submit">Submit</button>
      </div>
    </div>
  </fieldset>
</form>

Inline forms

A form can will contain only inline labels and inputs if marked with the class .form-inline. This form type also sets the width of all labels and inputs to auto. Inline forms should contain only a few elements. Labels for inputs should always be set but can be accessibly hidden with a special class .visually-hidden.

Inline forms will become a stacked form on small screen devices.

Inline form
<form class="form-inline">
  <fieldset>
    <legend>Inline form</legend>
    <div class="form-group">
      <label class="visually-hidden" for="exampleInputEmail">Email</label>
      <input type="text" id="exampleInputEmail" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label class="visually-hidden" for="exampleInputPassword">Password</label>
      <input type="password" id="exampleInputPassword" placeholder="Password">
    </div>
    <label class="checkbox">
      <input type="checkbox"> Check me out
    </label>
    <button type="submit">Submit</button>
  </fieldset>
</form>

Checkboxes & radio buttons

Chexboxes and radio buttons belong into the surrounding label, wich itself gets the class describing the content, either checkbox or radio.

Stacked checkboxes & radio buttons
<label class="checkbox">
  <input type="checkbox"> Check 1
</label>

<label class="radio">
  <input type="radio"> Radio 1
</label>
Inline checkboxes

With .checkbox-inline and .radio-inline these type of inputs will be displayed within one line.

Inline checkboxes & radio buttons
<label class="checkbox-inline">
  <input type="checkbox"> Check 1
</label>

<label class="radio-inline">
  <input type="radio"> Radio 1
</label>

Additional text

If input need additional text for descriptions wrap it with a p and apply .help-block.

Input with helping text

Helping text breaks below into a new line.

<input type="text">
<p class="help-block">...</p>

Size & height

Width of inputs and labels can be controlled with regular grid classes on. additional div nodes surrounding the inputs.

Grid columns in forms
<div class="form-group">
  <div class="col-medium-2"><input type="text"></div>
  <div class="col-medium-4"><input type="text"></div>
  <div class="col-medium-3 col-offset-3"><input type="text"></div>
</div>
Height

There are two additional sizing classes to increase the height of input elements. .input-small decreases the height and .input-large increases it.

Input heights
<input class="input-small" type="text">
<input type="text">
<input class="input-large" type="text">

Input states

Validation states

This topic needs to be discussed later. How and when do we validate wich kind of inputs?

Disabling forms and inputs

All input types can be disabled by setting a disabled onto the input itself. Some browser though also support the attribute on a fieldset, wich then disables all inputs within the fieldset. Disabling on a single input level will always work and should be considered until browser version support is finalized.

Disabled form
<form>
  <fieldset disabled>
    ...
  </fieldset>
</form>