12.2 #Form.default-small-large Default, Small, Large
.sf-form, .sf-form.-small, .sf-form.-large
Field is required
Example: Input example text
Field is required
Example: Input example text
Field is required
Example: Input example text
Html
<div class="sf-form">
<div class="sf-input">
<label class="sf-input__label" for="form_input_1">
<span>Field 1</span>
</label>
<input type="text" class="sf-input__field" id="form_input_1" placeholder="Search the blog..." />
<p class="sf-input__required" style="display: block">Field is required</p>
<p class="hint sf-input__hint">Example: Input example text</p>
</div>
<div class="sf-input">
<label class="sf-input__label" for="form_input_2">
<span>Field 2</span>
</label>
<input type="text" class="sf-input__field" id="form_input_2" placeholder="Search the blog..." />
</div>
</div>
<div class="sf-form -small">
<div class="sf-input">
<label class="sf-input__label" for="form_input_3">
<span>Field 1</span>
</label>
<input type="text" class="sf-input__field" id="form_input_3" placeholder="Search the blog..." />
<p class="sf-input__required" style="display: block">Field is required</p>
<p class="hint sf-input__hint">Example: Input example text</p>
</div>
<div class="sf-input">
<label class="sf-input__label" for="form_input_4">
<span>Field 2</span>
</label>
<input type="text" class="sf-input__field" id="form_input_4" placeholder="Search the blog..." />
</div>
</div>
<div class="sf-form -large">
<div class="sf-input">
<label class="sf-input__label" for="form_input_5">
<span>Field 1</span>
</label>
<input type="text" class="sf-input__field" id="form_input_5" placeholder="Search the blog..." />
<p class="sf-input__required" style="display: block">Field is required</p>
<p class="hint sf-input__hint">Example: Input example text</p>
</div>
<div class="sf-input">
<label class="sf-input__label" for="form_input_6">
<span>Field 2</span>
</label>
<input type="text" class="sf-input__field" id="form_input_6" placeholder="Search the blog..." />
</div>
</div>