<div class="form-group">
  <div class="checkbox">
    <input type="checkbox" id="cb-example-1" value="">
    <label for="cb-example-1"></label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="cb-example-2" value="" checked="checked">
    <label for="cb-example-2"></label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="cb-example-3" value="">
    <label for="cb-example-3">Unchecked with label</label>
  </div>
  <div class="checkbox checkbox--with-link">
    <input type="checkbox" id="cb-example-4" value="" checked="checked">
    <label for="cb-example-4">Checked with label</label>
    <a target="_blank" href="http://ec.europa.eu">including a link</a>
  </div>
</div>
<script>;
  jQuery(function () {
    jQuery('#cb-example-4').focus();
  });
</script>

<div class="form-group">
  <div class="checkbox checkbox--reverse">
    <input type="checkbox" id="cb-example-5" value="">
    <label for="cb-example-5"></label>
  </div>
  <div class="checkbox checkbox--reverse">
    <input type="checkbox" id="cb-example-6" value="" checked="checked">
    <label for="cb-example-6"></label>
  </div>
  <div class="checkbox checkbox--reverse">
    <input type="checkbox" id="cb-example-7" value="">
    <label for="cb-example-7">Reverse unchecked with label</label>
  </div>
  <div class="checkbox checkbox--reverse checkbox--with-link">
    <input type="checkbox" id="cb-example-8" value="" checked="checked">
    <label for="cb-example-8">Reverse checked with label</label>
    <a target="_blank" href="http://ec.europa.eu">including a link</a>
  </div>
</div>
<script>;
  jQuery(function () {
    jQuery('#cb-example-6').focus();
  });
</script>

<div class="form-group">
  <div class="file-upload">
    <div class="input-group">
      <div class="form-control file-upload__input" tabindex="0">
        <span class="file-upload__message">No file selected.</span>
      </div>
      <span class="input-group-btn">
        <label class="btn btn-default file-upload__label" for="field-name-1" tabindex="1">Browse</label>
        <button class="btn btn-primary" type="submit" tabindex="2">Upload</button>
      </span>
    </div>
    <input type="file" id="field-name-1">
    <p class="help-block">
      Files must be less than <strong>120 KB</strong>.<br>
      Allowed file types: <strong>txt pdf</strong>.
    </p>
  </div>
</div>

<h4>File upload error</h4>

<div class="form-group has-error">
  <div class="file-upload">
    <div class="input-group">
      <div class="form-control file-upload__input has-error" tabindex="0">
        <span class="file-upload__message">No file selected.</span>
      </div>
      <span class="input-group-btn">
        <label class="btn btn-default file-upload__label" for="field-name-2" tabindex="1">Browse</label>
      </span>
    </div>
    <input type="file" id="field-name-2">
  </div>
</div>

<script>
  jQuery(function () {
    jQuery('input[type="file"]').each(function () {
      var $input = jQuery(this),
          $message = $input.parent().find('.file-upload__message');

      $input.on('change', function (event) {
        if (this.files && event.target.value) {
          // The value comes in the form of C:\something\fileName.
          var filename = event.target.value.split('\\').pop();
          // Show the selected filename in the field.
          $message.html(filename);
        }
      });
    });
  });
</script>

<div class="form-group">
  <form>
    <fieldset>
      <legend>A group of fields:</legend>
      <div class="form-group europa-textfield">
        <label for="field-ID-1">A text field:</label>
        <input type="text" name="field-name-1" id="field-ID-1" class="form-control" placeholder="Some placeholder text."/>
        <p class="help-block">This is some placeholder help text.</p>
      </div>

      <div class="form-group">
      <label class="control-label">Radios:</label>
        <div class="radio europa-radio">
          <input type="radio" id="rd-example-1" value="">
          <label for="rd-example-1">Unchecked multiple option 1</label>
        </div>
        <div class="radio europa-radio">
          <input type="radio" id="rd-example-2" value="" checked="checked">
          <label for="rd-example-2">Checked multiple option 2</label>
        </div>
        <div class="radio europa-radio">
          <input type="radio" id="rd-example-3" value="" checked="checked">
          <label for="rd-example-3">Checked multiple option 3</label>
        </div>
        <div class="messages messages--form status">
          <p>Some feedback message</p>
        </div>
        <p class="help-block">This is some placeholder help text. </p>
      </div>

      <div class="form-group europa-select">
        <label for="example-select-id-uno">And a select:</label>
        <div class="form-select">
          <select class="form-control " id="example-select-id-uno">
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
            <option>option 4</option>
            <option>option 5</option>
            <option>option 6</option>
          </select>
          <p class="help-block">This is some placeholder help text. </p>
        </div>
      </div>
      
      <fieldset name="a_first_subgroup">
        <legend>A first subgroup:</legend>

        <div class="form-group europa-textfield">
          <label for="field-ID-1" class="error">
            A text field:
            <span class="form-required text-danger" title="This field is required.">*</span>
          </label>
          <input type="text" name="field-name-1" id="field-ID-1" class="form-control error" placeholder="Some placeholder text."/>
          <div class="messages messages--form messages--error">
            <a href="#" class="close" data-dismiss="alert">×</a>
            <p>Lorem ipsum lor sit amet, consectetur adipi, Lorem ipsum lor sit amet, consectetur adipi, Lorem ipsum lor sit amet, consectetur adipi Lorem ipsum lor sit amet, consectetur adipi</p>
          </div>
          <p class="help-block">This is some placeholder help text. </p>
        </div>

        <div class="form-group europa-textfield">
          <label for="field-ID-2">A text field with an insanely long label that will not fit into a single line:</label>
          <input type="text" name="field-name-3" id="field-ID-2" class="form-control" placeholder="Some placeholder text."/>
          <p class="help-block">This is some placeholder help text. is is some placeholder help text. is is some placeholder help text.
          is is some placeholder help text. is is some placeholder help text.</p>
        </div>

        <div class="form-group europa-textarea">
          <label class="control-label" for="field_textarea_demo">A Textarea: <span class="form-required text-danger" title="This field is required.">*</span></label>
          <textarea class="text-full form-control form-textarea required" name="field_textarea_demo" cols="60" rows="5"></textarea>
          <p class="help-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet dui nisl. Donec imperdiet ut leo vel porttitor. Quisque vehicula felis a commodo vehicula. Nulla sed risus lorem</p>
        </div>
      </fieldset>

      <fieldset name="a_second_subgroup">
        <legend>A second subgroup:</legend>
        
        <div class="form-group europa-textfield">
          <label for="field-ID-1">
            A text field:
            <span class="form-required text-danger" title="This field is required.">*</span>
          </label>
          <input type="text" name="field-name-1" id="field-ID-1" class="form-control" placeholder="Some placeholder text."/>
          <p class="help-block">This is some placeholder help text. </p>
        </div>
          
        <div class="form-group europa-file">
          <div class="file-upload">
            <div class="input-group">
             <label class="control-label" for="field_textarea_demo">A file upload: 
              <span class="form-required text-danger" title="This field is required.">*</span>
             </label>
              <div class="form-control file-upload__input" tabindex="0">
                <span class="file-upload__message">No file selected.</span>
              </div>
              <span class="input-group-btn">
                <label class="btn btn-default file-upload__label" for="field-name-1" tabindex="1">Browse</label>
                <button class="btn btn-primary" type="submit" tabindex="2">Upload</button>
              </span>
            </div>
            <input type="file" id="field-name-1">
            <div class="messages messages--form status">
              <a href="#" class="close" data-dismiss="alert">×</a>
              <p>A short status message.</p>
            </div>
            <p class="help-block">
              Files must be less than <strong>120 KB</strong>.<br>
              Allowed file types: <strong>txt pdf</strong>.
            </p>
          </div>
        </div>
  
        <div class="form-group europa-textfield">
          <label for="field-ID-2">A text field:</label>
          <input type="text" name="field-name-3" id="field-ID-2" class="form-control" placeholder="Some placeholder text."/>
          <p class="help-block">This is some placeholder help text. is is some placeholder help text. is is some placeholder help text.
          is is some placeholder help text. is is some placeholder help text.</p>
        </div>
      </fieldset>

      <div class="checkbox europa-checkbox">
        <input type="checkbox" id="example-1" value="" onchange="form.additional_info.style.display = 'block'">
        <label for="example-1">Click this checkbox to get additional fields:</label>
        <p class="help-block">This is some placeholder help text. </p>
      </div>
    </fieldset>
    <fieldset name="additional_info" hidden>
      <legend>Another fieldset:</legend>
      <div class="form-group europa-textfield">
        <label for="field-ID-2">A text field:</label>
        <input type="text" name="field-name-3" id="field-ID-3" class="form-control" placeholder="Some placeholder text."/>
        <p class="help-block">This is some placeholder help text.</p>
      </div>

      <div class="form-group europa-textfield">
        <label for="field-ID-3">A text field:</label>
        <input type="text" name="field-name-3" id="field-ID-3" class="form-control" placeholder="Some placeholder text."/>
        <p class="help-block">This is some placeholder help text.</p>
      </div>
    </fieldset>
  </form>
</div>

<p class="help-block">This is some placeholder help text.</p>

<label for="example-input-id">Some Label</label>

<legend>Legend text comes here</legend>

<div class="form-group">
  <div class="radio">
    <input type="radio" id="rd-example-1" value="">
    <label for="rd-example-1">Unchecked multiple option 1</label>
  </div>
  <div class="radio">
    <input type="radio" id="rd-example-2" value="" checked="checked">
    <label for="rd-example-2">Checked multiple option 2</label>
  </div>
  <div class="radio">
    <input type="radio" id="rd-example-3" value="" checked="checked">
    <label for="rd-example-3">Checked multiple option 3</label>
  </div>
  <div class="messages messages--form messages--error">
    <p>Some feedback message</p>
  </div>
</div>

<script>
  jQuery(function () {
    jQuery('#rd-example-3').focus();
  });
</script>

<div class="form-group">
  <label for="example-select-id-[modifier class]">Default</label>
  <div class="form-select">
    <select class="form-control [modifier class]" id="example-select-id-[modifier class]">
      <option>option 1</option>
      <option>option 2</option>
      <option>option 3</option>
      <option>option 4</option>
      <option>option 5</option>
      <option>option 6</option>
    </select>
  </div>
  <div class="messages messages--form status" class="form-field-feedback">
    <p>Some feedback message</p>
  </div>
  <p class="help-block">This is some placeholder help text.</p>
</div>

<form>
  <div class="form-group">
    <label for="example-input-id-1">Text Input - default with placeholder</label>
    <input type="text" class="form-control" id="example-input-id-1" placeholder="Some placeholder text."/>
    <p class="help-block">This is some help text.</p>
  </div>

  <div class="form-group focus">
    <label for="example-input-id-2">Text Input - active + focus</label>
    <input type="text" name="field-name-3" id="example-input-id-2" class="form-control is-focused"
           value="Some entered text"/>
    <div class="messages messages--form status alert"><p>Some feedback message</p></div>
    <p class="help-block">This is some placeholder help text.</p>
  </div>

  <div class="form-group is-disabled">
    <label for="example-input-id-3">Text Input - disabled</label>
    <input type="text" name="field-name-2" id="example-input-id-3" class="form-control" disabled
           placeholder="Some placeholder text."/>
    <p class="help-block">This is some placeholder help text.</p>
  </div>

  <div class="form-group has-error">
    <label for="example-input-id-4" class="error">Text Input - error on a field</label>
    <input type="text" name="field-name-4" id="example-input-id-4" class="form-control has-error"
           placeholder="Some placeholder text."/>
    <div class="messages messages--form messages--error alert"><p>Some error message</p></div>
    <p class="help-block">This is some placeholder help text.</p>
  </div>

  <div class="form-group">
    <label for="example-input-id-5">Password input type</label>
    <input type="password" name="field-name-5" id="example-input-id-5" class="form-control" value=""/>
    <div class="messages messages--form status alert"><p>Some feedback message</p></div>
    <p class="help-block">This is some placeholder help text.</p>
  </div>
</form>

<div class="form-group">
  <label for="field-ID-1">Field label</label>
  <textarea name="field-name" id="field-ID-1" rows="4" class="form-textarea form-control"></textarea>
  <p class="help-block">This is some placeholder help text.</p>
</div>

<div class="form-group">
  <label for="field-ID-2" class="error">Field label - error</label>
  <textarea name="field-name" id="field-ID-2" rows="4" class="form-control form-textarea error"></textarea>
  <div class="messages messages--form messages--error">
    <p>Some feedback message</p>
  </div>
  <p class="help-block">This is some placeholder help text.</p>
</div>