---
title: Search field
description: Search fields allow users to search and filter content with optional autocomplete suggestions.
category: Forms
related: [TextField, AutoComplete, Button, Container]
commonPatterns: [global-search, filter-search, autocomplete-search]
---

Source: https://clickhouse.design/click-ui/searchField

# Search field

Search fields allow users to search and filter content. They include a search icon and support autocomplete suggestions and clear functionality.

## Example

## Props

| Prop            | Type                   | Default value | Description                                                              |
| --------------- | ---------------------- | ------------- | ------------------------------------------------------------------------ |
| label           | `ReactNode`            | `""`          | Label text or content displayed above or beside the search field         |
| placeholder     | `string`               | `""`          | Placeholder text displayed when the search field is empty                |
| showClearButton | `boolean`              | `false`       | Whether to show a clear button when the field has content                |
| options         | `Array<string>`        | `[]`          | Array of autocomplete options to suggest as the user types               |
| size            | `"sm" \| "md" \| "lg"` | `"md"`        | Size variant of the search field                                         |
| error           | `boolean`              | `false`       | Whether the field is in an error state, typically shown with red styling |
| disabled        | `boolean`              | `false`       | Whether the field is disabled and cannot be interacted with              |

```tsx
import { SearchField } from '@clickhouse/click-ui'
import { useState } from 'react'

function MySearchField() {
const [value, setValue] = useState('')
return (
  <SearchField 
    id="example"
    label="Search"
    placeholder="Search..."
    onChange={(value, e) => setValue(value)}
  />
)
}
```

## Quick start

```tsx
import { SearchField } from '@clickhouse/click-ui'
import { useState } from 'react'

function MySearchField() {
const [value, setValue] = useState('')
return (
  <SearchField 
    id="search"
    label="Search"
    placeholder="Search..."
    onChange={(value, e) => setValue(value)}
  />
)
}
```

## Related components

- **TextField**: For basic text input without search icon.
- **AutoComplete**: For searchable dropdowns with autocomplete.
- **Button**: Often used alongside search fields for search actions.
- **Container**: For organizing search fields within layouts.

## Common use cases

### Global search

```tsx
import { SearchField } from '@clickhouse/click-ui'
import { useState } from 'react'

function GlobalSearch() {
const [query, setQuery] = useState('')
return (
  <SearchField
    id="search"
    label="Search"
    placeholder="Search everything..."
    onChange={(value, e) => setQuery(value)}
    showClearButton
  />
)
}
```

### Filter search

```tsx
import { SearchField, Container } from '@clickhouse/click-ui'
import { useState } from 'react'

function FilterSearch() {
const [filter, setFilter] = useState('')
return (
  <SearchField
    id="filter"
    label="Filter"
    placeholder="Filter by name..."
    onChange={(value, e) => setFilter(value)}
    showClearButton
  />
)
}
```

### With autocomplete

```tsx
import { SearchField } from '@clickhouse/click-ui'
import { useState } from 'react'

function AutocompleteSearch() {
const [query, setQuery] = useState('')
return (
  <SearchField
    id="search"
    label="Search with suggestions"
    placeholder="Search..."
    options={['Apple', 'Banana', 'Orange']}
    onChange={(value, e) => setQuery(value)}
  />
)
}
```

### States