Text Input

Text inputs are form inputs that gather plain text information from users. These classes are designed for <input type="text"> elements or <textarea> elements. An associated label is required. Optional placeholder and caption elements can also be added.

Variants

Text Input

Use c-text-input when the expected input is a single line, such as a name or phone number.

<input type="text" class="c-text-input" placeholder="Text input placeholder" />

Copy

Text Area

Use the c-textarea field when the expected input is more than one line, such as a comment or contact request.

<textarea name="" id="" class="c-textarea" placeholder="Textarea placeholder"></textarea>

Copy

States

In addition to the default state, both types of text inputs have hover, focus, change, blur and error states. The error state must be used with an input error component. Use c-text-input--error to apply the error state. An optional disabled state is also available. Use c-text-input--disabled to apply the disabled state.

Text Input in Disabled State

Use the disabled state when another action must be completed before the user can interact with the input.

<input type="text" class="c-text-input--disabled" placeholder="Text input placeholder" value="John Doe" disabled />

Copy

Text Area in Disabled State

Use the disabled state when another action must be completed before the user can interact with the input.

<textarea
  name=""
  id="text-area"
  class="c-textarea c-textarea--disabled"
  placeholder="The quick brown fox jumps over the lazy dog."
></textarea>

Copy

Tell me something good.

Text Input in Error State

A text input or text area in the error state must be used with an input error component to guide the user in correcting the error.

<div>
  <input
    type="text"
    class="c-text-input c-text-input--error"
    placeholder="e.g. Homer J. Simpson"
    id="text-input-1"
  />
  <span class="c-inline-error">
    <i class="icon icon--error c-inline-error__icon"></i>
    <span class="c-inline-error__content">
      Tell me something good.
    </span>
  </span>
</div>

Copy

Tell me something good.

Text Area in Error State

A text input or text area in the error state must be used with an input error component to guide the user in correcting the error.

<div>
<textarea
  name=""
  id="text-area"
  class="c-textarea c-textarea--error"
  placeholder="The quick brown fox jumps over the lazy dog."
></textarea>
<span class="c-inline-error">
  <i class="icon icon--error c-inline-error__icon"></i>
  <span class="c-inline-error__content">
    Tell me something good.
  </span>
</span>
</div>

Copy

Design Environment

Use .l-margin-vertical--medium between the text input and any components above or below it. Text inputs will fill 100% width of the parent container when standing alone. When inline with another component, they will fill 50% width. Use .l-margin-horizontal--medium between the text input and any inline components.

Microcopy

Placeholders should give the user an example or show the required format of the input. Never use a placeholder instead of a label, as the user will lose the prompt once they begin typing. Use sentence case with no end punctuation, unless otherwise dictated by the input format.