# UI: SearchField

> A search input whose label is only announced.

Source: https://pithyx.org/docs/reference/sdk/ui/search-field/
Markdown: https://pithyx.org/docs/reference/sdk/ui/search-field.md

A search input whose label is only announced. Import the token file once (`@pithyx/ui/tokens.css`) and wrap the app in `UiProvider`; see [@pithyx/ui](https://pithyx.org/docs/sdk/ui/).

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

## Interfaces

### SearchFieldProps

The props of [SearchField](#searchfield); `label` is announced, not shown.

#### Extends

- `Omit`\<`AriaSearchFieldProps`, `"className"` \| `"children"`\>

#### Properties

##### label

```ts
label: string;
```

The accessible name, announced but not shown.

##### placeholder?

```ts
optional placeholder?: string;
```

The visible hint inside the empty input.

##### className?

```ts
optional className?: string;
```

Extra class names, added after the field's own.

## Functions

### SearchField()

```ts
function SearchField(props): Element;
```

A search input whose label is only announced; the placeholder carries the visible hint. Escape and the clear
button empty it.

#### Parameters

| Parameter | Type                                    | Description                                                                                   |
| --------- | --------------------------------------- | --------------------------------------------------------------------------------------------- |
| `props`   | [`SearchFieldProps`](#searchfieldprops) | React Aria's search field props (`value`, `onChange`, `onSubmit`) plus label and placeholder. |

#### Returns

`Element`

The search field.