Forms

Forms consist of labels and input fields and are used when the user needs to input something into the system. A typical example could be to add a new customer or supplier to the system. The label is used to describe the input or element it belongs to.

We have two options for displaying labels; side labelling and top labelling. Carefully go through the examples before choosing one option and be very careful not to mix them. Read more about forms in the UX Guidelines.

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Behaviour

  • Use a descriptive label.
  • Keep the label as short as you can.
  • Display the inputs in logical order and put the most important fields first.

Side labelling / Horizontal forms

This is our classic design where the labels are placed to the left of their corresponding fields.

Side labelling is best used in forms with a lot of optional fields, unfamiliar data or advanced settings, as it allows users to effectively scan the labels. If you want users to slow down and carefully consider each input, side labelling is the way to go.

It is used where the space allows for both the label and its possible translations, and where cross-device usage (e.g. switching between desktop, tablet, smartphone etc) of the product is not expected.

Use the predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.


Inline form

Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Example 1



Example 2



Example 3


Top labelling

This is an alternative design where the labels are placed right above their corresponding fields.

Top labelling is best used for familiar data, such as addresses and credit card information. It makes good use of proximity grouping and gestalt principle, as it quickly guides the user through the flow.

It is used in contexts where cross-device use of a product is expected, and where horizontal space is an issue, but at the cost of vertical space.

Group boxes

Form groups using <fieldset> tag and using the grid classes col-* in order to arrange the boxes. As a title for each section you can use <legend>

Form group heading 1
Form group heading 2
Form group heading 3
Form group heading 4 
				
<!-- Side labelling / Horizontal forms -->
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail1" class="col-sm-3 control-label">Email</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword1" class="col-sm-3 control-label">Password</label>
    <div class="col-sm-9">
      <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-9 offset-md-3">
      <div class="checkbox">
        <input type="checkbox" id="checkbox1"> 
        <label for="checkbox1">Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-9 offset-md-3">
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>
		
<!-- Inline form - Example 1 -->
<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName1">Name</label>
    <input type="text" class="form-control" id="exampleInputName1" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn">Send</button>
</form>

<!-- Inline form - Example 2 -->
<form class="form-inline">
  <div class="form-group">
    <label for="exampleSelectOption">Choose option</label>
    <div class="select-wrapper">
       <select class="form-control"> ... </select>
    </div>
  </div>
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Name">
  </div>
  <button type="submit" class="btn">Send</button>
</form>

<!-- Inline form - Example 3 -->
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox2"> 
    <label for="checkbox2">Remember me</label>
  </div>
  <button type="submit" class="btn">Sign in</button>
</form>


<!-- Top labelling -->
<form>
  <div class="form-group">
    <label for="exampleInputEmail4">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail4" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox3"> 
    <label for="checkbox3">Check me out</label>
  </div>
  <button type="submit" class="btn">Submit</button>
</form>

<!-- Group boxes -->
<form role="form" class="row form-horizontal">
  <fieldset class="col-md-6" >
    <legend>Form group heading 1</legend>
    <div class="form-group">
      <label class="col-sm-4 control-label" for="inputEmail4">Email</label>
      <div class="col-sm-8">
        <input type="text" id="inputEmail4" class="form-control" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-4 control-label" for="Quisque">Quisque</label>
      <div class="col-sm-8">
        <span class="select-wrapper">
          <select id="Quisque" class="form-control">
            ...
          </select>
        </span>
      </div>
    </div>
    <div class="form-group disabled">
      <label class="col-sm-4 control-label" for="Disabled">Disabled</label>
      <div class="col-sm-8">
        <input type="text" id="Disabled" class="form-control" placeholder="Disabled field">
      </div>
    </div>
  </fieldset>
  ...
</form>