Text Input

Enter any combination of letters, numbers, or symbols for form entry.

Preview

Its most common usage is as a nested component of the Form Fields component.

Variants

The style for <input> text components always start with class="fsa-input", modifiable with one or multiple fsa-input--[VARIANT].

<input class="fsa-input fsa-input--[VARIANT]" type="text" name="some_name" value="">

Default

<input class="fsa-input" type="text" name="1iuoytytesgdf" value="Text" placeholder="Placeholder">

Fill

<input class="fsa-input fsa-input--fill" type="text" name="155tj" value="Text" placeholder="Placeholder">

Small

<input class="fsa-input fsa-input--small" type="text" name="qwerty" value="Text" placeholder="Placeholder">

Large

<input class="fsa-input fsa-input--large" type="text" name="ytrewq" value="Text" placeholder="Placeholder">

Prefix: Text

<span class="fsa-affix">
  <label for="affix-example__00" class="fsa-affix__prefix" aria-hidden="true" title="Dollars">$</label>
  <input id="affix-example__00" class="fsa-input fsa-affix__item" type="text" name="some_name" value="">
</span>

Prefix: Icon

<span class="fsa-affix">
  <label for="affix-example__06" class="fsa-affix__prefix" aria-hidden="true"><svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" fill="#494440" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"></path></svg></label>
  <input id="affix-example__06" class="fsa-input fsa-affix__item" type="text" name="some_name" value="">
</span>

Suffix: Text

<span class="fsa-affix">
  <input id="affix-example__12" class="fsa-input fsa-affix__item" type="text" name="some_name" value="25">
  <label for="affix-example__12" class="fsa-affix__suffix" aria-hidden="true" title="Percent">%</label>
</span>

Prefix/Suffix: Disabled

<span class="fsa-affix fsa-affix--disabled">
  <input id="affix-example__13" class="fsa-input fsa-affix__item" disabled="" type="text" name="some_name" value="120">
  <label for="affix-example__13" class="fsa-affix__suffix" aria-hidden="true" title="Pounds">lbs</label>
</span>

Prefix/Suffix: Readonly

<span class="fsa-affix fsa-affix--readonly">
  <input id="affix-example__14" class="fsa-input fsa-affix__item" readonly="" type="text" name="some_name" value="10028">
  <label for="affix-example__14" class="fsa-affix__suffix" aria-hidden="true">acres</label>
</span>

Within a Field

Label Required Instructional message here

<div class="fsa-field">
  <label class="fsa-field__label" for="TheItem2">Label <span class="fsa-field__label-desc">Required</span></label>
  <input class="fsa-input fsa-field__item" id="TheItem2" aria-describedby="lorem-1234-help-2" aria-required="true" name="TheItem2" type="text" value="">
  <span class="fsa-field__help" id="lorem-1234-help-2">Instructional message here</span>
</div>

Customizing Width

Though it should be rarely necessary, the width of .fsa-input can be overridden by using the size attribute, which specifies the width of the input in number of characters. From a display perspective, one character is equivalent to 1em (approximately 17px wide at default font size).

size="2"

size="14"

size="55"

<div class="fsa-level@l">
  <div>
    <div class="docs__code-sample"><code>size="<strong>2</strong>"</code></div>
    <input class="fsa-input" size="2" type="text" name="some_name" value="">
  </div>
  <div>
    <div class="docs__code-sample"><code>size="<strong>14</strong>"</code></div>
    <input class="fsa-input" size="14" type="text" name="some_name" value="">
  </div>
  <div>
    <div class="docs__code-sample"><code>size="<strong>55</strong>"</code></div>
    <input class="fsa-input" size="55" type="text" name="some_name" value="">
  </div>
</div>

*The default width of an <input class="fsa-input"> is generally 22 characters, though it can vary from browser to browser. Within a Field it defaults to 100% of its parent container and rarely should be overridden.

States

Error

<input class="fsa-input fsa-input--error" type="text" name="7id" value="Text">

Positive

<input class="fsa-input fsa-input--positive" type="text" name="lorem" value="Text">

Disabled

Disabled fields do not have a class="fsa-input--[VARIANT]", instead using the disabled attribute.

<input class="fsa-input" disabled="disabled" type="text" name="1224hd9f" value="Text">

Readonly

Readonly fields do not have a class="fsa-input--[VARIANT]", instead using the readonly attribute.

<input class="fsa-input" readonly="readonly" type="text" name="4f" value="Text">

Responsive

Selectively override several style properties at each Media Query breakpoint

fsa-select--[VARIANTS]@[BREAKPOINT], where VARIANTS is one or more of small, medium, large, fill, or inline; and BREAKPOINT is one or more of of s, m, l, or xl

View on a larger screen or device to fully appreciate Responsive Web Design rendering.

Usage

Use

If you can’t reasonably predict a user’s answer to a prompt and there might be wide variability in users’ answers.
When using another type of input will make answering more difficult. For example, birthdays and other known dates are easier to type in than they are to select from a calendar picker.
When users want to be able to paste in a response.
When users need only a single line of entry.

Don’t Use

When the value user enter are limited in amount
When users are choosing from a specific set of options. Consider select, radio, or checkbox.
When users need to enter multiple lines of content, consider the textarea element.

Accessibility

Always refer to the Accessibility Forms Guide for overall guidance.

If you customize the text inputs, ensure they continue to meet the the accessibility requirements that apply to all form controls.

Do not use the placeholder attribute as the sole label for accessibility reasons. Form components must have an associated <label> with matching for attribute. Additionally, most browsers’ default rendering of placeholder text does not provide a high enough contrast ratio to sufficiently serve as the sole label.
Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three (one for area code, one for local code, and one for number). Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful.

General Guidance

The length of the text input provides a hint to users as to how much text to write. Do not require users to write paragraphs of text into a single-line input box; use a textarea instead.
Text inputs are among the easiest type of input for desktop users but are more difficult for mobile users.
Consider the type of content a user may enter to aid mobile device entry; mobile devices typically surface a keyboard UI attuned to the type. For example, type="tel" will surface a phone keyboard.
Only show error validation messages or styling after a user has interacted with a particular field; avoid significantly updating styles while a user is actively entering input.
Do not use the placeholder attribute in place of a <label> element. Its purposes is different: the standard <label> describes the role of the form element; that is, it indicates what kind of information is expected. The placeholder attribute is typically a hint about the format the content should take. There are cases in which the placeholder attribute is not displayed to the user (e.g. when input field has a value), so the form must be understandable without it.

Overview