---
title: Text input (Vanilla) - USWDS + Tailwind
description: Collect short answers with text inputs. See examples with hint text
  and valid or invalid states.
---

# Text input

Collect short answers with text inputs. See examples with hint text and valid or invalid states.

## Example

```html
<div class="space-y-12">

  <div class="max-w-xs">
    <label for="default" class="block">Default input</label>
    <div class="mt-2 relative">
      <input id="default" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4"/>
    </div>
  </div>

  <div class="max-w-xs">
    <label for="description" class="block">Description input</label>
    <div id="input-hint" class="text-gray-50">An input description</div>
    <div class="mt-2 relative">
      <input id="description" aria-describedby="input-hint" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4"/>
    </div>
  </div>

  <div class="max-w-xs">
    <label for="success" class="block">Success input</label>
    <div class="mt-2 relative">
      <input id="success" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4" data-valid="true"/>
    </div>
  </div>

  <div class="max-w-xs">
    <label for="error" class="block">Error input</label>
    <div class="mt-2 relative">
      <input id="error" class="p-2 w-full max-w-lg h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:ring-4 invalid:ring-red-60v invalid:border-transparent invalid:outline-offset-4 valid:ring-4 valid:ring-green-cool-40v valid:border-transparent valid:outline-offset-4" data-invalid="true"/>
    </div>
  </div>

</div>
```