Text Input

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

Variants

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

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

Default

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

Fill

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

Small

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

Large

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

Prefix: Text

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

Prefix: Icon

<spanclass="fsa-affix"><labelfor="affix-example__06"class="fsa-affix__prefix"aria-hidden="true"><svgclass="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"><pathd="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><inputid="affix-example__06"class="fsa-input fsa-affix__item"type="text"name="some_name"value=""></span>

Suffix: Text

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

Prefix/Suffix: Disabled

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

Prefix/Suffix: Readonly

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

Within aField

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

Customizing Width

Though it should berarely necessary, the width of.fsa-input can be overridden by using thesize attribute, which specifies the width of theinput in number of characters. From a display perspective, one character is equivalent to1em (approximately17px wide at default font size).

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

*The default width of an<input> is generally22 characters, though it can vary from browser to browser. Within aField it defaults to100% of its parent container and rarely should be overridden.

States

Error

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

Positive

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

Disabled

Disabled fields do not have aclass="fsa-input--[VARIANT]", instead using thedisabled attribute.

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

Readonly

Readonly fields do not have aclass="fsa-input--[VARIANT]", instead using thereadonly attribute.

<inputclass="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], whereVARIANTS is one or more ofsmall,medium,large,fill, orinline; andBREAKPOINT is one or more of ofs,m,l, orxl

Usage

Accessibility

Always refer to theAccessibility 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 theplaceholder attribute as the sole label for accessibility reasons. Form components must have an associated<label> with matchingfor 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 atextarea 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 aphone 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 theplaceholder 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. Theplaceholder 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.