12 #Form Form

Field is required

Example: Input example text

Html
    <div class="sf-form -condensed">
         <div class="sf-input">
             <label class="sf-input__label" for="form_input_9">
                 <span>Field 1</span>
             </label>
             <input type="text" class="sf-input__field" id="form_input_9" 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_10">
                 <span>Field 2</span>
             </label>
             <input type="text" class="sf-input__field" id="form_input_10" placeholder="Search the blog..." />
         </div>
    </div>

Toggle full screen Open in new window 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>
Html
    <div class="sf-form -framed">
         <div class="sf-input">
             <label class="sf-input__label" for="form_input_7">
                 <span>Field 1</span>
             </label>
             <input type="text" class="sf-input__field" id="form_input_7" placeholder="Search the blog..." />
         </div>
         <div class="sf-input">
             <label class="sf-input__label" for="form_input_8">
                 <span>Field 2</span>
             </label>
             <input type="text" class="sf-input__field" id="form_input_8" placeholder="Search the blog..." />
         </div>
    </div>

Field is required

Example: Input example text

Html
    <div class="sf-form -medium">
         <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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-form > .sf-input.-shrinked

Field is required

Example: Input example text

Html
    <div class="sf-form">
         <div class="sf-input -shrinked">
             <label class="sf-input__label" for="form_input_11">
                 <span>Field 1</span>
             </label>
             <input type="text" class="sf-input__field" id="form_input_11" 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 -shrinked">
             <label class="sf-input__label" for="form_input_12">
                 <span>Field 2</span>
             </label>
             <input type="text" class="sf-input__field" id="form_input_12" placeholder="Search the blog..." />
         </div>
    </div>