Text Fields

Text fields allow users to input, edit, and select text.

Text fields typically reside in forms but can appear in other places, like dialog boxes and search.

<div class="form-group form-group-label">
    <label class="floating-label" for="..."> ... </label>
    <input class="form-control" id="..." type="text">
    <div class="form-help"></div>
</div>

<div class="form-group form-group-label">
    <label class="floating-label" for="..."> ... </label>
    <select class="form-control" id="...">
        ...
    </select>
    <div class="form-help"></div>
</div>

<div class="form-group form-group-label">
    <label class="floating-label" for="..."> ... </label>
    <textarea class="form-control" id="..." rows="..."></textarea>
</div>

Auto Expanding Textarea

<div class="form-group form-group-label">
    <label class="floating-label" for="..."> ... </label>
    <textarea class="form-control textarea-autosize" id="..." rows="1"></textarea>
</div>

<div class="form-group form-group-label">
    <label class="floating-label" for="..."> ... </label>
    <input class="form-control" id="..." type="text">
    <div class="form-help">
        ...
    </div>
</div>

Error Message

<div class="form-group form-group-label">
    <label class="floating-label" for="..."> ... </label>
    <input class="form-control" id="..." type="text">
    <div class="form-help">
        <span class="error-message"> ... </span>
    </div>
</div>

Character Counter

<div class="form-group form-group-label">
    <label class="floating-label" for="..."> ... </label>
    <input class="form-control" id="..." type="text" maxlength="10">
    <div class="form-help">
        <span class="character-counter" data-target="#..." data-max-length="10"></span>
    </div>
</div>