---
title: "SearchField"
description: "A search input with a trailing magnifier on the form input surface, controlled or uncontrolled."
url: https://docs.systhema.app/components/search-field
version: unreleased (main)
docs_index: https://docs.systhema.app/llms.txt
---
`SearchField` is a single-line `type="search"` input with a trailing magnifier icon. It is built like a [select](https://docs.systhema.app/components/form-select.md): a wrapper holds the input and an icon overlay, on the same input tokens, so a search box and a select sit side by side identically. It holds no state and does no searching; you own the value and the submit.
```tsx preview title="SearchField"
import { SearchField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
## Import
```tsx
import { SearchField } from '@systhemaui/next'
```
In a React app without Next.js, import it from `@systhemaui/react`.
## Examples
### Controlled
Every native `
setQuery(event.target.value)}
placeholder="Filter components"
aria-label="Filter components"
/>
{matches.length > 0 ? (
{matches.map((name) => (
{name}
))}
) : (
No component matches “{query}”.
)}
)
}
```
### Next to a select
The search field and [`FormSelect`](https://docs.systhema.app/components/form-select.md) share padding, border, radius and type, so a filter bar lines up without extra CSS.
```tsx preview title="Filter bar"
import { FormGroup, FormRow, FormSelect, Option, SearchField } from '@systhemaui/next'
export default function Demo() {
return (
All categories
News
Guides
)
}
```
### Custom icon
`icon` replaces the default magnifier. Without it, the wrapper renders an empty `.search-field-icon` that the CSS masks with the magnifier glyph in the input's icon color.
```tsx preview title="Custom icon"
import { SearchField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
The icon sits in an `aria-hidden` span, so it is never announced.
## Props
`className` goes on the wrapper and `inputClassName` on the input; `type` defaults to `'search'`.
| Prop | Type | Default | Description |
| ----------------------------- | ----------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string` | - | Class applied to the field wrapper (the positioning context). |
| `inputClassName` | `string` | - | Class applied to the inner `