Skip to main content
USWDS + Tailwind

Text input

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

Examples

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Enter your full name
text-input-demo.tsx
import { Input } from '@uswds-tailwind/react'


export default function TextInputDemo() {
  return (
    <div className="max-w-xs">
      <label htmlFor="name" className="block">Name</label>
      <div id="name-hint" className="text-gray-50">Enter your full name</div>
      <Input id="name" aria-describedby="name-hint" />
    </div>
  )
}

Component API

Input and Textarea are styled native form controls. Pair either with Field for a connected label, hint, and error message.

Input<input>

Accepts native input props and forwards its ref.

Textarea<textarea>

Accepts native textarea props and forwards its ref.