Form elements

<label for="input-type-text">Text input label</label>
<input id="input-type-text" name="input-type-text" type="text">

<label for="input-focus">Text input with focus</label>
<input class="input-focus sg-input-focus" id="input-focus" name="input-focus" type="text">

<div class="input-error">
    <label class="input-error-label" for="input-error">Text input error</label>
    <span id="input-error-message" role="alert">Helpful error message</span>
    <input id="input-error" name="input-error" type="text" aria-describedby="input-error-message" class="sg-input-error">
</div>

<label for="input-success">Text input success</label>
<input class="input-success sg-input-success" id="input-success" name="input-success" type="text">

<label for="input-type-textarea">Text area label</label>
<textarea id="input-type-textarea" name="input-type-textarea"></textarea>

<form>
    <label for="search-example">Search</label>
    <div class="search">
        <input id="search-example" type="text" name="search" placeholder="Search" class="search-field">
        <input type="submit" value="submit" class="search-submit">
    </div>
</form>