Text fields

Allow users to input information.

Opattern text fields have a label above explaining what the field is for. Additionally, microcopy is displayed below the field to guide the user for what information is needed. This is followed by alert messages and confirmations such as a validation message.

  • Provide descriptive labels for all text fields
  • Provide at least 20 characters for all text fields
  • Avoid multi-column layouts (exception first and last name)
  • Avoid microcopy inside text fields

Types of text fields

Microcopy
Microcopy
Alert message
Microcopy
Success message
Microcopy
Disabled message
{% toggleText('form') %}
<form>
    <fieldset>
        <div class="">
            <label for="textinput">Label</label>
            <input type="text" id="textinput"/>
            <div class="input-helper">Microcopy</div>
        </div>
        <div class="alert">
            <label for="textinput">Label</label>
            <input type="text" id="textinput"/>
            <div class="input-helper">Microcopy</div>
            <div class="alert-message">Alert message</div>
        </div>
        <div class="success">
            <label for="textinput">Label</label>
            <input type="text" id="textinput"/>
            <div class="input-helper">Microcopy</div>
            <div class="success-message">Success message</div>
        </div>
        <div class="disabled">
            <label for="textinput">Label</label>
            <input type="text" id="textinput"/>
            <div class="input-helper">Microcopy</div>
            <div class="disabled-message">Disabled message</div>
        </div>
    </fieldset>
    <div class="searchbox-example">
        <div class="search-label">
            <input type="search" results="5" id="textinput" class="search" placeholder="search" />
        </div>
    </div>
</form>