Widgets
Forms
Markup for HTML forms
General
1
<form>
2
<label for="text" class="form-label">Textbox</label>
3
<div class="help-block">Help text block</div>
4
<input type="text" id="text" placeholder="Placeholder text...">
5
</form>
Copied!
Validation
1
<form>
2
<label for="text" class="form-label">Error <span class="error-color">*</span></label>
3
<input type="text" id="text" required>
4
<div class="field-validation-error">Error text</div>
5
</form>
Copied!
Validated
1
<form>
2
<label for="text" class="form-label">Validated <span class="error-color">*</span></label>
3
<div class="form-validate-wrap">
4
<input type="text" id="text" required value="Validated">
5
<i class="fa fa-check-circle" aria-hidden="true"></i>
6
</div>
7
</form>
Copied!
Checkbox
1
<label class="cb-wrap">
2
<input type="checkbox"> Checkbox
3
<span class="checkmark"></span>
4
</label>
Copied!
Radio
1
<label class="rb-wrap">
2
<input type="radio" name="radio"> Radio 1
3
<span class="radiobtn"></span>
4
</label>
Copied!
Success!
1
<div class="text-center">
2
​
3
<svg class="checkmark-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
4
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
5
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
6
</svg>
7
​
8
<h4 class="success-color">Oh yhea, you did it!</h4>
9
​
10
</div>
Copied!
Last modified 1yr ago