---
title: Text input (React) - 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.

## Examples

```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.