Helper Text

<!-- Required Text -->
<label for="input-type-text" class="usa-input-required">Required text input</label>
<input id="input-type-text" name="input-type-text" type="text" required="" aria-required="true">

<!-- Hint text -->
<label id="form-hint-label" for="input-type-hint">Text input label</label>
<span id="form-hint-text" class="usa-form-hint">This is example hint text</span>
<input id="input-type-hint" name="input-type-text" type="text" aria-labeledby="form-hint-label form-hint-text">

<!-- Helper Text (wrapped in form for example because form note floats right-->
<form class="usa-form">
    <label id="form-helper-label" for="input-type-helper">Text input label</label>
    <input id="input-type-helper" name="input-type-text" type="text" aria-labeledby="form-helper-label form-helper-text">
    <p id="form-helper-text" class="usa-form-note" aria-controls="input-type-text" title="Helper text">This is an example of form note helper text</p>
</form>