> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# SearchField
> A text input field with a search icon and optional clear button.
```tsx theme={null}
import { SearchField } from "@fanvue/ui";
import type { SearchFieldProps, SearchFieldSize } from "@fanvue/ui";
```
## Examples
## Default
```tsx theme={null}
import { SearchField } from "@fanvue/ui";
```
## With Label
```tsx theme={null}
import { SearchField } from "@fanvue/ui";
```
## All States
```tsx theme={null}
import { SearchField } from "@fanvue/ui";
```
## Text Overflow
```tsx theme={null}
import { SearchField } from "@fanvue/ui";
```
## With Clear Button
```tsx theme={null}
import { useState } from "react";
import { SearchField } from "@fanvue/ui";
function Example() {
const [value, setValue] = useState("test query");
return (
setValue(e.target.value)}
onClear={() => setValue("")}
/>
);
}
```
## Props
## SearchField
A text input field with a search icon and optional clear button.
Trailing interactive element pinned to the right edge — typically a `Chip` or `Button` (the "with button" field type). Reduces the right padding so the control sits flush, and clicks on it do not steal focus from the input.
Debounce delay in milliseconds for the onChange callback. When set, the input maintains internal state for responsive typing while debouncing onChange to the parent.
Whether the text field is in an error state.
Error message displayed below the input. Shown instead of `helperText` when `error` is `true`.
Whether the text field stretches to fill its container width.
Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`.
Label text displayed above the input. Also used as the accessible name.
Fixed, non-editable label pinned inside the left edge of the field — for a prefix such as a currency symbol or country code.
Minimum number of characters required before onChange fires. The input still updates visually, but onChange is suppressed until the threshold is met. Clearing always fires onClear regardless.
Callback fired when the clear button is clicked. If provided, a clear button appears when the field has a value.
Icon element displayed at the right side of the input.
Fixed, non-editable label pinned inside the right edge of the field — for a unit or suffix such as a currency code or domain.
Size variant of the search field.
Whether the text field is validated.
## Exported types
Also exported from `@fanvue/ui`: `SearchFieldProps`, `SearchFieldSize`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)