---
title: Input group (React) - USWDS + Tailwind
description: Use an input group to add a prefix or suffix that clarifies units,
  symbols, or the information a text field expects.
---

# Input group

Use an input group to add a prefix or suffix that clarifies units, symbols, or the information a text field expects.

## Examples

```tsx
import { Input, InputGroup } from '@uswds-tailwind/react'

export default function InputGroupDemo() {
  return (
    <div className="space-y-12">
      <div className="max-w-xs">
        <label htmlFor="card-number" className="block">Credit card number</label>
        <InputGroup
          startElement={(
            <div aria-hidden="true" className="select-none pointer-events-none absolute left-0 whitespace-nowrap px-2 text-gray-50 flex items-center">
              <div className="icon-[material-symbols--credit-card-outline] size-6" />
            </div>
          )}
        >
          <Input id="card-number" inputMode="numeric" autoComplete="cc-number" />
        </InputGroup>
      </div>

      <div className="max-w-28">
        <label htmlFor="weight" className="block">Weight, in pounds</label>
        <InputGroup
          endElement={(
            <div aria-hidden="true" className="select-none pointer-events-none absolute right-0 whitespace-nowrap px-2 text-gray-50">
              lbs.
            </div>
          )}
        >
          <Input id="weight" inputMode="decimal" />
        </InputGroup>
      </div>
    </div>
  )
}
```

## Component API

Use InputGroup around a form control with optional leading or trailing content.

### InputGroup `<div>`

Arranges the control and adjacent content.

| Prop | Type | Description |
| - | - | - |
| `startElement` | `ReactNode` | Adds content before the control. |
| `endElement` | `ReactNode` | Adds content after the control. |