Text input

Allow users to enter single-line text content to be submitted as part of a form

Overview #

Use the text input component to allow the user to enter single-line text content to be submitted as part of a form.

Examples #

Choose an example

<label for="text-input-default" class="rvt-label">Text Input</label>
<input type="text" id="text-input-default" class="rvt-text-input">

Open in new window Copy link to example

<!-- Success -->
<label for="text-input-success" class="rvt-label">Text Input</label>
<input type="text" id="text-input-success" class="rvt-text-input rvt-validation-success">
<div class="rvt-inline-alert rvt-inline-alert--success">
  <span class="rvt-inline-alert__icon">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <g fill="currentColor">
        <path d="M10.2,5.4,7.1,9.53,5.67,8.25a1,1,0,1,0-1.34,1.5l2.05,1.82a1.29,1.29,0,0,0,.83.32h.12a1.23,1.23,0,0,0,.88-.49L11.8,6.6a1,1,0,1,0-1.6-1.2Z" />
        <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z" />
      </g>
    </svg>
  </span>
  <span class="rvt-inline-alert__message" id="first-name-message">First name is valid!</span>
</div>

<!-- Warning -->
<label for="text-input-warning" class="rvt-label [ rvt-m-top-md ]">Text Input</label>
<input type="text" id="text-input-warning" class="rvt-text-input rvt-validation-warning">
<div class="rvt-inline-alert rvt-inline-alert--warning">
  <span class="rvt-inline-alert__icon">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <g fill="currentColor">
        <path d="M11,9H5A1,1,0,0,1,5,7h6a1,1,0,0,1,0,2Z" />
        <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Z" />
      </g>
    </svg>
  </span>
  <span class="rvt-inline-alert__message" id="first-name-message">Your Password is weak.</span>
</div>

<!-- Danger -->
<label for="text-input-danger" class="rvt-label [ rvt-m-top-md ]">Text Input</label>
<input type="text" id="text-input-danger" class="rvt-text-input rvt-validation-danger">
<div class="rvt-inline-alert rvt-inline-alert--danger">
  <span class="rvt-inline-alert__icon">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <g fill="currentColor">
        <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z" />
        <path d="M10.83,5.17a1,1,0,0,0-1.41,0L8,6.59,6.59,5.17A1,1,0,0,0,5.17,6.59L6.59,8,5.17,9.41a1,1,0,1,0,1.41,1.41L8,9.41l1.41,1.41a1,1,0,0,0,1.41-1.41L9.41,8l1.41-1.41A1,1,0,0,0,10.83,5.17Z" />
      </g>
    </svg>
  </span>
  <span class="rvt-inline-alert__message" id="first-name-message">The Username you entered is taken.</span>
</div>

<!-- Info -->
<label for="text-input-info" class="rvt-label [ rvt-m-top-md ]">Text Input</label>
<input type="text" id="text-input-info" class="rvt-text-input rvt-validation-info">
<div class="rvt-inline-alert rvt-inline-alert--info">
  <span class="rvt-inline-alert__icon">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <g fill="currentColor">
        <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Z" />
        <path d="M8,12a1,1,0,0,1-1-1V8A1,1,0,0,1,9,8v3A1,1,0,0,1,8,12Z" />
        <circle cx="8" cy="5" r="1" />
      </g>
    </svg>
  </span>
  <span class="rvt-inline-alert__message" id="first-name-message">The Description tells users more about this stuff.</span>
</div>

Usage #

Do

Use to collect information that will only take up one line, such as a name, phone number, or city
Keep label text brief

Don't

Use to collect information that would take up multiple lines, such as an address, issue description, or short essay—use a textarea instead

Accessibility #

Every text input requires a label. A placeholder attribute is not a substitute for a label. If you need to visually hide a label in an accessible way, use the .rvt-sr-only utility class.
Don’t label text inputs implicitly. Avoid wrapping a text input with its associated label element instead of using an explicit for attribute on that label.