Skip to main content
Hennepin County Design System

Text input

Text input field

Text input fields allow people to enter letters, numbers, or symbols onto a single line. Text input fields are most used in forms. You can also use them in a search field, modal, or card. They let users enter, change or save information.

HTML

<div class="hc-form-group">
         <label class="hc-field-label" for="hc-textInputEx1">Full name</label>
         <input
            class="hc-input"
            id="hc-textInputEx1"
            name="hc-name1"
            type="text"
          />
        </div>

Import

Label

When to use

Use text input field to collect short answers from users:

  • When answers are unpredictable or allow for a wide variety of responses
  • For short, simple answers, like names or phone number
  • When users will paste in a single-line response

When not to use

  • Don’t use text input field for information that might span more than one line. Instead, use a textarea component.
  • When the user needs to choose from a pre-set list of answers, use another option like a radio button or checkbox.
Open all

Placeholder text

Don’t use placeholder text:

  • Computers and screen readers can’t automatically translate it.
  • The low-contrast style of placeholder text doesn’t meet color contrast requirements.
  • Placeholder text may be misread as pre-filled information if the contrast is too high. This can cause users to skip over the text input field.
  • Placeholder text disappears when users start typing. This removes the guidance the text provides.
  • Placeholder text doesn’t work well with screen readers and other assistive technologies.

Instead of placeholder text, use labels:

  • Create clear, succinct labels that describe the input’s purpose. Labels tell screen readers what the input field is for.
  • Labels give focus to the associated form control when activated. On mobile, this increases the touch area to activate the input field. The bigger touch area makes it much easier formobile users to interact with the form.
  • Make sure the for attribute in the label and the id attribute in the <input> are the same. This helps assistive devices associate the label and its corresponding input.

Help text

When using help text:

  • Place the help text above the input and below the label. Use aria-describedby to associate <input> with the help text inside the <p>.

Example:

<label for="hc-id">Text input with help text</label>.

<p id="input-id-hint" class="input-hint">Here is help text with useful information instead of placeholder.</p>

<input class="hc-input" id="hc-id" name="hc-name" type="text" aria-describedby="input-id-hint">

  • Make the help text short, simple, and meaningful. It will make it easier for users to understand.

Readonly and disabled input attributes

The readonly attribute:

  • Users can't edit the text in an input field with this attribute.
  • This attribute has controllable functions and lets users focus on them. 
  • Use readonly for important values that can’t change.

The disabled attribute:

  • Users can’t change or interact with the text in an input field with this attribute.
  • Users who are visually impaired won’t be aware the text input field exists.
  • These input fields also have muted styling which fails color contrast requirements.

Examples:

<label class="hc-label" for="hc-id"> Readonly Text input:</label>

<input class="hc-input" id="hc-id" name="hc-name" type="text" readonly>

<label class="hc-label" for="hc-id">Disabled Text input:</label>

<input class="hc-input" id="hc-id" name="hc-name" type="text" disabled>

Required text input fields

Provide clear indicators to users:

  • Inform them they must enter information into the fields.
  • Ensure all users can easily understand the requirement. This could include people who are color blind, neurodivergent, or use assistive technology.

Example:

<label class="required-class" for="hc-id"> Required Text input:</label>

<input class="hc-input" id="hc-id" name="hc-name" type="text" required>

Avoid using <input type="number">. Users may increment the numbers by accident. They also will not receive explicit feedback if they enter a character that is not a number. Instead, use the inputmode attribute and set it to "numeric".

If only asking one question on a page, assign the <label> an appropriate heading level. If asking more than one question, don’t assign the <label> a heading level.

The autocomplete attribute helps users complete the text input field quickly and easily. The browser auto-fills information into the text input fields. This saves users from having to enter every single character. For example, use autocomplete="postal-code" to fill out a text input field asking for a zip code.

Open all

Textarea field

Textarea lets users enter text that is longer than a single line. It follows the same principals as the text input field. With the addition of more rows for the user to enter information.

Use text input for open ended questions. A larger area to enter text signifies to sighted users how detailed they can be with their message.

Include rows in the textarea proportional to the amount of text you expect users to enter. Set the height of a textarea by by specifying the rows attribute.


HTML

<div class="hc-form-group">
          <label class="hc-field-label" for="hc-textarea1">Instructions</label>
          <textarea
            class="hc-textarea"
            id="hc-textarea1"
            name="hc-textarea"
            rows="5"
            cols="50"
          ></textarea>
        </div>

Import

Label