---
title: Search (React) - USWDS + Tailwind
description: Add a search form to help visitors find site content. Compare
  default, large, and icon-button layouts.
---

# Search

Add a search form to help visitors find site content. Compare default, large, and icon-button layouts.

## Examples

### Default

```tsx
import { Search } from '@uswds-tailwind/react'

export default function SearchDemo() {
  return (
    <div className="max-w-lg">
      <Search.Root>
        <Search.Label>Search</Search.Label>
        <Search.Input />
        <Search.Button>Search</Search.Button>
      </Search.Root>
    </div>
  )
}
```

### Large

```tsx
import { Search } from '@uswds-tailwind/react'

export default function SearchLargeDemo() {
  return (
    <div className="max-w-lg">
      <Search.Root size="lg">
        <Search.Label>Search</Search.Label>
        <Search.Input />
        <Search.Button>Search</Search.Button>
      </Search.Root>
    </div>
  )
}
```

### Icon Button

```tsx
import { Search } from '@uswds-tailwind/react'

export default function SearchIconButtonDemo() {
  return (
    <div className="max-w-lg">
      <Search.Root size="sm">
        <Search.Label>Search</Search.Label>
        <Search.Input />
        <Search.Button aria-label="Search" />
      </Search.Root>
    </div>
  )
}
```

## Component API

Put Label, Input, and Button inside Root to form a search control.

### Root `<div>`

Sets the shared search size and field state.

| Prop | Type | Default | Description |
| - | - | - | - |
| `size` | `default \| sm \| lg` | `default` | Changes the input and button size. |
| `name` | `string` | `—` | Form field name. |
| `required` | `boolean` | `—` | Requires a query. |
| `disabled` | `boolean` | `—` | Disables the search control. |

| Attribute | Value | Purpose |
| - | - | - |
| `data-disabled` | `Present when disabled` | Style the disabled state. |

### Label `<label>`

Provides a visually hidden accessible name.

| Attribute | Value | Purpose |
| - | - | - |
| `data-disabled` | `Present when disabled` | Style the disabled state. |

### Input `<input>`

Receives the search query.

| Attribute | Value | Purpose |
| - | - | - |
| `data-disabled` | `Present when disabled` | Style the disabled state. |

### Button `<button>`

Submits the search; children replace the default search icon. Give the icon-only button an accessible name, such as aria-label="Search".

| Attribute | Value | Purpose |
| - | - | - |
| `data-disabled` | `Present when disabled` | Style the disabled state. |