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

<label for="text-input-default" class="rvt-label">Text Input <span class="rvt-color-orange-500 rvt-text-bold">*</span></label>
<input type="text" id="text-input-default" class="rvt-text-input" required>

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 fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M7 11.414 11.914 6.5 10.5 5.086 7 8.586l-1.5-1.5L4.086 8.5 7 11.414Z"></path><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"></path></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 fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M12 7H4v2h8V7Z"></path><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"></path></svg>
  </span>
  <span class="rvt-inline-alert__message" id="weak-password-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 fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m8 6.586-2-2L4.586 6l2 2-2 2L6 11.414l2-2 2 2L11.414 10l-2-2 2-2L10 4.586l-2 2Z"></path><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"></path></svg>
  </span>
  <span class="rvt-inline-alert__message" id="username-taken-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 fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M9 7v5H7V7h2ZM8 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"></path><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6a6 6 0 1 0 0 12A6 6 0 0 0 8 2Z"></path></svg>
  </span>
  <span class="rvt-inline-alert__message" id="description-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.
Include a note about required fields. If you use required text inputs in a form, add a note to the start of the form or field set explaining that required fields are marked with an asterisk (*). The create or edit resource page layout includes an example of this note.