Forms

GOVstrap uses the same form layout as regular Bootstrap, so you don't need to learn anything new. There are a few extra features you may want to use later on however.

Text field

An example of a basic text field. You can add help text for each field by using the help-block class.

Example

Your parents probably gave you this name

            
<div class="form-group">
  <label class="control-label" for="userName">Your name</label>
  <input type="text" class="form-control" id="userName">
  <p class="help-block">Your parents probably gave you this name</p>
</div>
            
          

Select field Top

Example
            
<div class="form-group">
  <label class="control-label" for="myOptions">Pick an option</label>
  <select class="form-control" id="myOptions">
    <option>Something</option>
    <option>More things</option>
    <option>Even more</option>
  </select>
</div>
            
          

Radio Buttons Top

The main thing to keep in mind with large checkboxes and radio buttons, is that .block-label controls the size of the field. Excluding that class gives you a regular element.

Example
            
<div class="form-group">
  <label class="radio-inline block-label">
    <input type="radio" name="optradio">Yes
  </label>
  <label class="radio-inline block-label">
    <input type="radio" name="optradio">No
  </label>
  <label class="radio-inline block-label">
    <input type="radio" name="optradio">Can you repeat the question?
  </label>
</div>
            
          

Checkboxes Top

Just like the radio buttons, omitting the block-label would cause it to render standard checkboxes

Example
            
<div class="form-group">
  <div class="checkbox">
    <label class="block-label">
      <input type="checkbox" name="fruits"> Watermelon
    </label>
  </div>
</div>

<div class="form-group">
  <div class="checkbox">
    <label class="block-label">
      <input type="checkbox" name="fruits"> Oranges
    </label>
  </div>
</div>

<div class="form-group">
  <div class="checkbox">
    <label class="block-label">
      <input type="checkbox" name="fruits"> Apples
    </label>
  </div>
</div>
            
          

Conditional fields Top

Sometimes you'll only want to show a field when a specific option has been selected. GOVstrap can handle that right out of the box

Just add the js-togggle class to the form-group holding the radio buttons. data-target tells js-toggle the targets id. You can tell Govstrap.io which button shows the hidden field by applying data-toggle="true" to the radio button.

Finally, the hidden field must have a class of js-hidden, which will hide it by default until it's ready to be shown

Example

Do you know their National Insurance number?

            
<div class="form-group">
  <h4>Do you know their National Insurance number?</h4>
</div>

<div class="form-group js-toggle" data-target="nin">
  <label class="radio-inline block-label">
    <input type="radio" data-toggle="true" name="hasnin">Yes
  </label>
  <label class="radio-inline block-label">
    <input type="radio" name="hasnin">No
  </label>
</div>

<div class="form-group js-hidden panel-left">
  <label class="control-label" for="nin">
    National Insurance number
  </label>
  <input type="text" class="form-control" id="nin">
</div>