12.2 #Form.default-small-large Form

Toggle example guides Toggle HTML markup

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:&nbsp;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:&nbsp;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:&nbsp;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>