Forms

Markup for HTML forms

General

<form>
    <label for="text" class="form-label">Textbox</label>
    <div class="help-block">Help text block</div>
    <input type="text" id="text" placeholder="Placeholder text...">
</form>

Validation

<form>
    <label for="text" class="form-label">Error <span class="error-color">*</span></label>
    <input type="text" id="text" required>
    <div class="field-validation-error">Error text</div>
</form>

Validated

<form>
   <label for="text" class="form-label">Validated <span class="error-color">*</span></label>
   <div class="form-validate-wrap">
      <input type="text" id="text" required value="Validated">
      <i class="fa fa-check-circle" aria-hidden="true"></i>
   </div>
</form>

Checkbox

<label class="cb-wrap">
    <input type="checkbox"> Checkbox
    <span class="checkmark"></span>
</label>

Radio

<label class="rb-wrap">
    <input type="radio" name="radio"> Radio 1
    <span class="radiobtn"></span>
</label>

Success!

<div class="text-center">

   <svg class="checkmark-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
      <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
      <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
   </svg>

   <h4 class="success-color">Oh yhea, you did it!</h4>

</div>