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 #
<label for="text-input-default" class="rvt-label">Text Input</label>
<input type="text" id="text-input-default" class="rvt-text-input">
<!-- 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 explicitfor
attribute on that label.