<div class="sf-input -char-counter">
        <input type="text" class="sf-input__field" id="input-45" />
        <span class="sf-input__char-counter">352</span>
    </div>
    </br>
    </br>
    <div class="sf-input -textarea -char-counter">
        <textarea type="textarea" class="sf-input__textarea" id="textarea-4">Longer than 4</textarea>
        <span class="sf-input__char-counter -error">-9</span>
    </div>

   <div class="sf-input">
       <label class="sf-input__label" for="input_1">
           <span>Input title</span>
       </label>
        <input type="text" class="sf-input__field" id="input_1" placeholder="Search the blog..." />
       <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
   </div>

    <div class="sf-input">
        <label class="sf-input__label" for="input-6">
            <span>Input title</span>
        </label>
        <input type="text" class="sf-input__field" disabled value="User name" id="input-6" />
    </div>

   <div class="sf-input-file">
       <label class="sf-input-file__label" for="input-file_1">
           <a class="-secondary sf-icon sf-fa sf-fa-upload -size-xl" title="Upload"></a>
       </label>
        <input type="file" id="input-file_1" />
   </div>

    <div class="sf-input -clearable">
        <label class="sf-input__label" for="input-32">
            <span>Input title</span>
        </label>
        <input type="text" class="sf-input__field" id="input-32" />
        <span class="sf-input__clear-button -show"><i class="sf-icon -size-3xs sf-fa sf-fa-times"></i></span>
        <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
    </div>

    <div class="sf-input-file">
        <label class="sf-input-file__label sf-row -column -align-items-center -sf-mt-xl" for="input-file_3">
            <i class="sf-icon sf-fa sf-fa-upload -illustrative -sf-mb-xl -sf-mr-zero"></i>
            <span class="sf-button -action -large -sf-mb-m">Upload images from your computer</span>
        </label>
         <input type="file" id="input-file_3" />
    </div>

    <div class="sf-input ng-invalid ng-dirty">
        <label class="sf-input__label" for="input-77" >
             <span>Required Input</span>
        </label>
        <input type="text" class="sf-input__field ng-invalid ng-dirty" required value="User name" id="input-77" />
        <p class="sf-input__required">Field is required</p>
        <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
    </div>
    <div class="sf-input -required">
        <label class="sf-input__label" for="input-8" >
             <span>Required Input</span>
        </label>
        <input type="text" class="sf-input__field -required ng-invalid ng-dirty" required value="User name" id="input-8" />
        <p class="sf-input__required">Field is required</p>
        <p class="hint sf-input__hint">Example:&nbsp;Input example text</p>
    </div>

    <div class="sf-input -title">
        <h1 class="sf-input__title -title" contenteditable="true" data-placeholder="Title"></h1>
    </div>

    <div class="sf-input">
        <label class="sf-input__label" for="input-4">
            <span>Input title</span>
        </label>
        <div class="sf-input__no-value">Not set</div>
    </div>

    <div class="sf-input-file">
        <label class="sf-input-file__label" for="input-file_2">
        <a class="sf-button -icon -circle">
              <i class="sf-icon -size-xs sf-fa sf-fa-plus sf-button__icon"></i>
        </a>
        </label>
         <input type="file" id="input-file_2" />
    </div>

    <div class="sf-input">
        <label class="sf-input__label" for="input-7" >
             <span>Input title</span>
        </label>
        <input type="text" class="sf-input__field" readonly value="User name" id="input-7" />
    </div>

    <div class="sf-input -textarea -char-counter -side-content" style="width:600px;">
        <textarea type="textarea" class="sf-input__textarea" id="textarea-49"></textarea>
        <span class="sf-input__char-counter -success">44</span>
        <span class="sf-input__side-content">Side content</span>
    </div>

    <div class="sf-input -title -side-content">
        <h1 class="sf-input__title -title" contenteditable="true" data-placeholder="Title"></h1>
        <span class="sf-input__side-content"><i class="sf-icon sf-fa sf-fa-question-circle -size-xs -black"></i></span>
    </div>

    <div class="sf-input -title -side-content -required">
        <h1 class="sf-input__title -title" contenteditable="true" data-placeholder="Title"></h1>
        <p class="sf-input__required">Enter Title<br /></p>
        <span class="sf-input__side-content"><i class="sf-icon sf-fa sf-fa-question-circle -size-xs -black"></i></span>
    </div>

    <div class="sf-input -textarea">
        <label class="sf-input__label" for="textarea-1">
            <span>Textarea title</span>
        </label>
        <textarea type="textarea" class="sf-input__textarea" id="textarea-1"></textarea>
    </div>

    <div class="sf-input -left -unit">
        <input type="search" class="sf-input__field" id="input-24" />
        <label for="input-24" class="sf-icon -light -size-s sf-input__unit"><i class="sf-fa sf-fa-eur"></i></label>
    </div>
    </br>
    </br>
    <div class="sf-input -unit">
        <input type="search" class="sf-input__field" id="input-4" />
        <label  class="sf-icon -light -size-s sf-input__unit" for="input-4">m<sup>2</sup></label>
    </div>