Overview

Material Design conducted studies with around 600 participants to understand characteristics of text field usability and user preferences for text field design. The studies measured a user’s ability to scan and find a text field as well as the ability to identify the types of text fields.

Research showed the following are best practices that can be adopted to improve the usability of text fields:

• Use an enclosed text field with a rectangular box, rather than a single underline to indicate a text field
• Use either a semi-transparent fill with a bottom line or a fully transparent fill with an opaque stroke for the text field box
• Place label text within the boundary of a text field box
• Ensure text field outlines or strokes meet 3:1 minimum color contrast ratio to the background

Types

Text fields can display user input in the following ways:

1. Single line text fields
   • As the cursor reaches the right field edge, text longer than the input line automatically scrolls left. Single-line fields are not suitable for collecting long responses, instead use a multi-line text field or text area.
2. Multi-line text fields
   • Shows all user input at once. Overflow text causes the text field to expand (shifting screen elements downward), and text wraps onto a new line. These fields initially appear as single-line fields, which is useful for compact layouts that need to be able to accommodate large amounts of text.
3. Text areas
   • Taller than text fields and wrap overflow text onto a new line. They are a fixed height and scroll vertically when the cursor reaches the bottom of the field. The large initial size indicates that longer responses are possible and encouraged. Ensure the height of a text area fits within mobile screen sizes.
4. Read-only fields
   • Display pre-filled text that the user cannot edit. A read-only text field is styled the same as a regular text field and is clearly labeled as read-only.

Usage & Principles

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. They should be:

1. Discoverable
   • Text fields should stand out and indicate that users can input information.
2. Clear
   • Text field states should be clearly differentiated from one another.
3. Efficient
   • Text fields should make it easy to understand the requested information and to address any errors.

Anatomy

Container

Containers improve the discoverability of text fields by creating contrast between the text field and surrounding content.

Fill and stroke

A text field container has a fill and a stroke around the entire container. The color and thickness of a stroke can change to indicate when the text field is active.

Label text

Label text is used to inform users as to what information is requested for a text field. Every text field should have a label. Label text should be aligned with the input line, and always visible. It can be placed in the middle of a text field, or rest near the top of the container.

Required text indicator

If most fields are required, indicate optional fields only by displaying the word “optional” in parentheses next to the label text. This is the most commonly used practice for FBB. If only some fields are required, indicate those required ones. To indicate that a field is required, display an asterisk (*) next to the label text and mention near the form that asterisks indicate required fields.

Input text

Input text is text the user has entered into a text field. A cursor indicates the current location of text input in a field.

Assistive Elements

Assistive elements provide additional detail about text entered into text fields.

1. Helper Text
   • Helper text conveys additional guidance about the input field, such as how it will be used. It should only take up a single line, being persistently visible or visible only on focus.
2. Error Message
   • When text input isn’t accepted, an error message can display instructions on how to fix it. Error messages are displayed below the input line, replacing helper text until fixed.
3. Icons
   • Icons can be used to message alerts as well. Pair them with error messages to provide redundant alerts, which are useful when you need to design for colorblind users.
4. Character Counter
   • Character or word counters should be used if there is a character or word limit. They display the ratio of characters used and the total character limit.

Error text

For text fields that validate their content (such as passwords), replace helper text with error text when applicable. Swapping helper text with error text helps prevent new lines of text from being introduced into a layout, thus bumping content to fit it.

If only one error is possible, error text describes how to avoid the error.

If multiple errors are possible, error text describes how to avoid the most likely error.

Text Input

<div class="form-label-group">
       <input id="text-input-1" class="form-control" type="text" placeholder="Text Input Field">
       <label for="text-input-1">Default</label>
</div>

Password Input (Show/Hide)

<div class="form-label-group">
  <input id="password-input-1" class="form-control input-password-toggle" type="password" placeholder="Password Input Field" autocomplete="password">
  <a tabindex="0" class="input-password-toggle-link">Show</a>
  <label for="password-input-1">Default</label>
</div>

Validation Input

<div class="form-label-group validation-input">
  <input id="validation-input-1" class="form-control input-password-toggle" type="password" placeholder="Password Input Field" autocomplete="password" maxlength="16">
  <a tabindex="0" class="input-password-toggle-link">Show</a>
  <label for="validation-input-1">Default</label>
  <div class="form-text small">
    <span class="validation-indicator length">8-16 Characters</span>
    <span class="validation-indicator letter">1 Letter</span>
    <span class="validation-indicator number">1 Number</span>
  </div>
</div>

Text Areas

<div class="form-label-group">
  <textarea id="textarea-input-1" class="form-control" type="text" placeholder="Textarea Field"></textarea>
  <label for="textarea-input-1">Default</label>
</div>

Text Inputs - Helper Text

<div class="form-label-group">
  <input id="helper-text-1" class="form-control" type="text" placeholder="Text Input Field">
  <label for="helper-text-1">Text Field Label</label>
  <div class="form-text">
    Helper message written here
  </div>
</div>

Invalid Input

Dropdown

In order to implement the <select> dropdown in this design system, a .dropdown-select class is required in the parent element wrapper of the <select> element.

If you do not want to pre-select an option, a default <option> must be set as the first child of the <select> element, as shown in the default and hovered examples below. A default option must be the first child and either have a selected attribute and/or a .is-default-option class. For example: <option value class="is-default-option" selected disabled hidden></option>.

<div class="dropdown-select">
  <select id="dropdown-1" class="form-control">
    <option value="" class="is-default-option" disabled="" hidden=""></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Default</label>
</div>

Types

Radio Buttons

Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space. When options include more than a simple label, surround the radio button and other options with a border to create a button. Ensure a proper “hit area” surrounds the radio button. Clicking the radio circle, label or surrounding area should select or deselect that option.

Checkboxes

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. Ensure a proper “hit area” surrounds the checkbox. Clicking the checkbox, label or surrounding area should select or deselect that option.

Switches

Switches should be used instead of radio buttons if each item in a set can be independently controlled. When a user toggles a switch, its corresponding action takes effect immediately.

Usage & Principles

Selection controls allow users to complete tasks that involve making choices such as selecting options, or switching settings on or off. Selection controls are found on screens that ask users to make decisions or declare preferences such as settings or dialogs.

Familiar

1. Familiar
   • Selection controls have been in user interfaces for a long time and should be used as expected.
2. Scannable
   • It should be visible at a glance if a selection control has been selected, and selected items should be more visually prominent than unselected items.
3. Efficient
   • Selection controls make it easy to compare available options.

Checkboxes

Usage

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. Ensure a proper “hit area” surrounds the checkbox. Clicking the checkbox, label or surrounding area should select or deselect that option.

Radio

<div class="custom-control custom-radio">
    <input class="custom-control-input" type="radio" id="radio-input" name="custom-radio-group" />
    <label class="custom-control-label" for="radio-input">Radio Label</label>
</div>

Radio Button

Usage

Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space. When options include more than a simple label, surround the radio button and other options with a border to create a button. Ensure a proper “hit area” surrounds the radio button. Clicking the radio circle, label or surrounding area should select or deselect that option.

Use the .radio-button-label inside of the .form-radio-content block to make sure it gets bolded when option is selected, as desired. Example below.

<div class="form-radio-button-container">
    <input class="form-radio-button-input" type="radio" id="radio-button-input" name="shared-radio-button-group-name" />
    <div class="form-control form-radio-content">
        <label class="form-radio-button-label" for="radio-button-input">
            <!-- Start: Customize your radio label content in this block -->
            <div class="d-flex justify-content-between">
                <span class="radio-button-label">Arrives Aug 1 - 3</span>
                <span class="font-weight-bold">$14.99</span>
            </div>
            <div class="font-size-md">Standard Delivery (7 business days)</div>
            <!-- End: Customize your radio label content in this block -->
        </label>
        <!-- Additional non-radio label content can go here -->
    </div>
</div>