Textbox Component

IMPORTANT: The examples below show the textbox in isolation, without any label. Remember: every textbox requires a label!

Single-Line Textbox

Use an input tag for a single-line textbox.

<span class="textbox">
  <input class="textbox__control" type="text" placeholder="placeholder text" />
</span>

Readonly Textbox

Use the readonly attribute to prevent any modification of the value.

<span class="textbox textbox--readonly">
  <input
    class="textbox__control"
    type="text"
    value="Readonly textbox"
    readonly
  />
</span>

Disabled Textbox

Use the disabled attribute to completely disable the input and any value.

<span class="textbox textbox--disabled">
  <input
    class="textbox__control"
    type="text"
    placeholder="placeholder text"
    disabled
  />
</span>

Error-State Textbox

Use the aria-invalid attribute to highlight any input with error.

<span class="textbox textbox--invalid">
  <input
    class="textbox__control"
    type="text"
    placeholder="placeholder text"
    aria-invalid="true"
  />
</span>

Multi-line Textbox

Use the textarea tag for a multi-line textbox.

A multi-line textbox allows line breaks and has a minimum height of 200px.

<span class="textbox">
  <textarea class="textbox__control" placeholder="placeholder text" />
</span>

Fluid Textbox

Apply the textbox--fluid modifier (or fluid utility class) to fill the width of the parent element.

<div class="textbox textbox--fluid">
  <input class="textbox__control" type="text" placeholder="placeholder text" />
</div>

Textbox with Icon

Single-line textboxes can be augmented with any SVG icon .

<span class="textbox">
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="#icon-mail-24" />
  </svg>
  <input class="textbox__control" type="text" placeholder="placeholder text" />
</span>

To display the icon at the end of the control, position the svg tag after the input.

<span class="textbox">
  <input class="textbox__control" type="text" placeholder="placeholder text" />
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="#icon-mail-24" />
  </svg>
</span>

NOTE: The icon is presentational, and therefore hidden from assistive technology using aria-hidden . Remember, the purpose of the field must be conveyed using a label.

Textbox with Icon Button

Single-line textboxes also support an icon button in the end position.

<span class="textbox">
  <input class="textbox__control" type="text" placeholder="placeholder text" />
  <button
    class="icon-btn icon-btn--transparent"
    type="button"
    aria-label="Clear text"
  >
    <svg aria-hidden="true" class="icon icon--24" width="16" height="16">
      <use href="#icon-clear-24" />
    </svg>
  </button>
</span>

An icon button in the end position can also be teamed up with a static icon in the start position.

<span class="textbox">
  <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
    <use href="#icon-search-24" />
  </svg>
  <input
    aria-label="Textbox demo"
    class="textbox__control"
    type="text"
    placeholder="placeholder text"
  />
  <button
    class="icon-btn icon-btn--transparent"
    type="button"
    aria-label="Clear text"
  >
    <svg aria-hidden="true" class="icon icon--24" width="16" height="16">
      <use href="#icon-clear-24" />
    </svg>
  </button>
</span>

Large Textbox

Use textbox--large modifier to style the textbox to be large size

<span class="textbox">
  <input class="textbox__control" type="text" />
</span>

Textbox Prefix

Add a span containing text before the input to show it as a prefix text.

<span class="textbox">
  <span> $ </span>
  <input class="textbox__control" type="text" />
</span>

Textbox Postfix

Add a span containing text after the input to show it as a postfix text.

<span class="textbox">
  <input class="textbox__control" type="text" />
  <span> in. </span>
</span>

Mixed icons and static text

Postfix/prefix icons can be mixed with static text in the textbox.

<span class="textbox">
  <span> $ </span>
  <input class="textbox__control" type="text" placeholder="0.00" />
  <button
    class="icon-btn icon-btn--transparent icon-btn--small"
    type="button"
    aria-label="Clear text"
  >
    <svg aria-hidden="true" class="icon icon--clear-16" width="16" height="16">
      <use href="#icon-clear-16" />
    </svg>
  </button>
</span>