Text inputs

Text fields give users the ability to enter text. They can be single-line or multi-line (textarea inputs).

Standard text inputs

Single-line text inputs

Use to input single lines of text, for example email addresses, names, or search queries. The length of the input field should be proportional to the expected user input, so that the user can see what they’ve typed without having to scroll to reveal hidden content. See the guidelines section below for more information.







HTML code snippet

<!--States are shown for demonstration purposes only-->
<label class="a-label a-label__heading" for="textinput-example-default">
Default
</label>
<input class="a-text-input"
      type="text"
      id="textinput-example-default"
      placeholder="Enter text…"
      value="Placeholder text">
<br><br>
<label class="a-label a-label__heading" for="textinput-example-hover">
Hover
</label>
<input class="a-text-input hover"
       type="text"
       id="textinput-example-hover"
       placeholder="Enter text…"
       value="Placeholder text">
<br><br>
<label class="a-label a-label__heading" for="textinput-example-focus">
Focus
</label>
<input class="a-text-input focus"
       type="text"
       id="textinput-example-focus"
       placeholder="Enter text…"
       value="Lorem ipsum">
<br><br>
<label class="a-label a-label__heading" for="textinput-example-disabled">
Disabled
</label>
<input class="a-text-input"
       type="text"
       id="textinput-example-disabled"
       placeholder="Enter text…"
       value="Lorem ipsum"
       disabled>

Specs

Default

  • Border: 1 px, Gray 60 (#919395)
  • Height: 35 px
  • Padding: 7px
  • Avenir Next Regular, 16px, Gray (#5a5d61)
  • Text should be in sentence case

Hover

  • Border: 2 px, Pacific (#0072ce)

Focus

  • Border: 2 px, Pacific (#0072ce)
  • Outline: Dotted 1px, Pacific (#0072ce)
  • Outline offset: 1px

Disabled

  • Background: Gray 10 (#e7e8e9)

Multi-line textarea inputs

Use for long-form answers that are more than a single word or two. Make sure the input size is big enough that the user can see what they’ve typed without having to scroll to reveal hidden content, and small enough that the user doesn’t have to navigate the viewport in order to see the entire field at once.

HTML code snippet

<label class="a-label a-label__heading" for="textarea-example-default">
    Label
</label>
<textarea class="a-text-input"
          id="textarea-example-default"
          placeholder="Enter text…">Placeholder text</textarea>

Specs

  • Border: 1 px, Gray 60 (#919395)
  • Avenir Next Regular, 16 px, Gray (#5a5d61)

Variations

Full-width text inputs

HTML code snippet

<div class="m-form-field">
    <label class="a-label a-label__heading" for="full-textinput-example">
        Label
    </label>
    <input class="a-text-input a-text-input__full"
          type="text"
          id="full-textinput-example"
          value="Placeholder text">
</div>

Full-width textarea inputs

HTML code snippet

<div class="m-form-field">
    <label class="a-label a-label__heading" for="full-textarea-example">
        Label
    </label>
    <textarea class="a-text-input a-text-input__full"
              id="full-textarea-example">Placeholder text</textarea>
</div>

Datepicker inputs

HTML code snippet

<div class="m-form-field">
    <label class="a-label a-label__heading" for="datepicker-example">
        Label
    </label>
    <input class="a-text-input"
          type="date"
          id="datepicker-example"
          placeholder="mm/dd/yyyy">
</div>

Text input with a button

These are used for simple forms where a full filter isn’t necessary.

HTML code snippet

<div class="o-form__input-w-btn">
    <div class="o-form__input-w-btn_input-container">
        <input class="a-text-input" type="text" title="Test input">
    </div>
    <div class="o-form__input-w-btn_btn-container">
        <button class="a-btn">Search</button>
    </div>
</div>

Button inside a text input

These offer the user an action to take related to the input, typically to clear the input.

HTML code snippet

<div class="m-btn-inside-input">
    <input type="text"
        value="This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable."
        title="Test input"
        class="a-text-input">
    <button class="a-btn a-btn__link">
        {% include icons/error.svg %}
        <span class="u-visually-hidden">Clear</span>
    </button>
</div>

Button inside a text input with another button

This example combines both of the previous patterns, creating a typical site search form.

HTML code snippet

<div class="o-form__input-w-btn">
    <div class="o-form__input-w-btn_input-container">
        <div class="m-btn-inside-input">
            <input type="text"
                value="This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable."
                title="Test input"
                class="a-text-input">
            <button class="a-btn a-btn__link">
                {% include icons/error.svg %}
                <span class="u-visually-hidden">Clear</span>
            </button>
        </div>
    </div>
    <div class="o-form__input-w-btn_btn-container">
        <button class="a-btn">Search</button>
    </div>
</div>