Text Field@1.0.0

<!-- resting state -->
<!-- HACK NOTE: remove the inline style for width when using this component -->
<div class="c-text-field" style="width: 280px;">
    <input 
        class="c-text-field__input" 
        type="text" 
        id="tf-box" 
    />
    <label for="tf-box" class="c-text-field__label" id="lbl-tf">Text field</label>
    <p class="c-text-field__helper-text">Helper text (possibly validation message)</p>
</div>

<div class="c-text-field" style="width: 280px;">
    <input 
        class="c-text-field__input" 
        type="text" 
        id="tf-box2" 
    />
    <label for="tf-box2" class="c-text-field__label" id="lbl-tf2">Text field</label>
    <p class="c-text-field__helper-text is-displayed">Helper text (possibly validation message)</p>
</div>

<!-- dirty state -->
<!-- HACK NOTE: remove the inline style for width when using this component -->
<div class="c-text-field" style="width: 280px;">
    <input 
        class="c-text-field__input" 
        type="text" 
        id="tf-box-dirty"
        value="Bacon ipsum awesomeness." 
    />
    <label for="tf-box-dirty" class="c-text-field__label is-dirty">Text field</label>
    <p class="c-text-field__helper-text">Helper text (possibly validation message)</p>
</div>

<!-- helper text -->
<!-- HACK NOTE: remove the inline style for width when using this component -->
<div class="c-text-field" style="width: 280px;">
    <input 
        class="c-text-field__input" 
        type="text" 
        id="tf-box-helper"
        value="Bacon ipsum awesomeness."  
    />
    <label for="tf-box-helper" class="c-text-field__label is-dirty">Text field</label>
    <p class="c-text-field__helper-text is-displayed">Helper text (possibly validation message)</p>
</div>

<!-- error state -->
<!-- HACK NOTE: remove the inline style for width when using this component -->
<div class="c-text-field" style="width: 280px;">
    <input 
        class="c-text-field__input has-error" 
        type="text" 
        id="tf-box-error" 
        value="Bacon ipsum awesomeness." 
    />
    <label for="tf-box-error" class="c-text-field__label is-dirty has-error">Text field</label>
    <p class="c-text-field__helper-text is-displayed has-error">Helper text (possibly validation message)</p>
</div>