Components

Sidebars, panels, buttons, widgets, and all that good stuff.

Buttons

GOV.UK doesn't really have the button colour choice that Bootstrap has, so we've just worried about styling btn-primary. This will give you the default green button. There's also btn-primary btn-start, which adds the chevron you'll find on their start buttons

Example
            
<button class="btn btn-primary">btn-primary</button>
<button class="btn btn-primary btn-start">btn-primary btn-start</button>
            
          

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 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>