# UI: SearchField

> Ein Suchfeld, dessen Beschriftung nur vorgelesen wird.

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

Ein Suchfeld, dessen Beschriftung nur vorgelesen wird. Importiere die Token-Datei einmal (`@pithyx/ui/tokens.css`) und umschließe die App mit `UiProvider`; siehe [@pithyx/ui](https://pithyx.org/de/docs/sdk/ui/).

Beim Build aus den TSDoc-Kommentaren von @pithyx/ui 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.

## Schnittstellen

### SearchFieldProps

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

#### Erweitert

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

#### Eigenschaften

##### 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.

## Funktionen

### 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.

#### Parameter

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

#### Rückgabewert

`Element`

The search field.