Text inputs
Text inputs allow the user to enter any combination of letters, numbers, or symbols. Text input fields can span single or multiple lines.
Types
Text input
Use when the expected user input is a single line 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.
States
Validation status
HTML code snippet
<!--States are shown for demonstration purposes only-->
<h4>
States
</h4>
<input class="a-text-input"
type="text"
id="textinput-example-default"
placeholder="Placeholder text"
value="Enabled">
<br><br>
<input class="a-text-input hover"
type="text"
id="textinput-example-hover"
placeholder="Placeholder text"
value="Hover">
<br><br>
<input class="a-text-input focus"
type="text"
id="textinput-example-focus"
placeholder="Placeholder text"
value="Focus">
<br><br>
<input class="a-text-input"
type="text"
id="textinput-example-disabled"
placeholder="Disabled"
disabled>
<br>
<br>
<br>
<h4>
Validation status
</h4>
<input class="a-text-input a-text-input--success" type="text" placeholder="Success" id="form-input-success" aria-describedby="form-input-success_message">
<br><br>
<input class="a-text-input a-text-input--warning" type="text" placeholder="Warning" id="form-input-warning" aria-describedby="form-input-warning_message">
<br><br>
<input class="a-text-input a-text-input--error" type="text" placeholder="Error" id="form-input-error" aria-describedby="form-input-error_message">Text input (full width)
HTML code snippet
<div class="m-form-field">
<input class="a-text-input a-text-input--full"
type="text"
id="full-textinput-example"
placeholder="Placeholder text"
value="Input text">
</div>Text input (with button)
Use 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 a-text-input--full"
type="text"
id="full-textinput-w-btn-example"
placeholder="Placeholder text"
value="Input text">
</div>
<div class="o-form--input-w-btn__btn-container">
<button class="a-btn">Search</button>
</div>
</div>Button inside text input
Use to 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">
<span class="u-visually-hidden">Clear</span>
</button>
</div>Button inside text input (with 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">
<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>Text area input
Text area input
Use when the expected user input is more than a few words and could span multiple lines. 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
<textarea class="a-text-input"
id="textarea-example-default"
placeholder="Placeholder text">Input text</textarea>Text area input (full width)
Guidelines
Stylistic guidelines
Choose the appropriate width for text input fields so they match the kind of information requested. This makes it easier for users to quickly grasp what’s being asked.
For example, it’s hard to understand at a glance that a single 1,000 px-wide text field is asking for your phone number or birth date. When possible, be even more explicit with the width by dividing it into known character counts. For instance, social security number should be three characters, then two, then four. Be mindful of not getting too restrictive, however. This approach could work for phone numbers, but only if international numbers are not permitted.
These types of inputs should always be smaller widths:
- Middle initial
- Date, month, or year
- State abbreviation
Content guidelines
Text should be in sentence case. Use placeholder text for formatting examples only. Don’t use for instructions. Placeholder text disappears once a user begins typing in the field. For more information, see Design System guidance on placeholder text.
Behavior
As the screen size gets smaller, break multi-column inputs into a single, stacked column. Fields that are next to each other on a large screen, should stack at smaller screen sizes. When possible, fields should span the entire width of the screen at the smallest screen sizes.
Accessibility
Inputs should always be paired with a label for accessibility reasons.
Users of screen readers use the tab key to move focus from one form control to another. Make sure that tab focus order reflects the way you would like users to navigate through the form. Consider whether tabs should move a user down or across the page.