# SearchField-Komponente für Stripe Apps

Verwenden Sie SearchField, damit Nutzer/innen Inhalte in Ihrer Stripe App suchen und filtern können.

# v9


So fügen Sie Ihrer App die `SearchField` Komponente hinzu:

```js
import {SearchField} from '@stripe/ui-extension-sdk/ui';
```

Verwenden Sie das `SearchField`, um Nutzerinnen und Nutzern die Suche und Auswahl eines oder mehrerer Werte aus einer Liste zu erleichtern. Setzen Sie es ein, wenn die Liste lang, filterbar oder dynamisch geladen ist.

#### Einfachauswahl

### Eigenschaften von SingleSearchFieldProps

| Eigenschaft         | Typ                                                                                                                                                                                                                                                                                |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data`              | (Erforderlich)
  `SearchFieldDataObject[]`

  Ein Array von Datenelementen, die in den Suchergebnissen des SearchFields angezeigt werden sollen.

  Verwandte Typen: [SearchFieldDataObject](https://docs.stripe.com/stripe-apps/components/searchfield.md#searchfielddataobject). |
| `label`             | (Erforderlich)
  `string`

  Text, der das Steuerelement beschreibt. Er ist sichtbar und anklickbar.                                                                                                                                                                               |
| `selectionMode`     | (Erforderlich)
  `"single"`                                                                                                                                                                                                                                                        |
| `defaultSelected`   | (Optional)
  `(string | number) | undefined`

  Anfänglich ausgewähltes Element in der Sammlung.                                                                                                                                                                                   |
| `description`       | (Optional)
  `string | undefined`

  Beschreibender Text, der neben der Beschriftung des Steuerelements angezeigt wird.                                                                                                                                                            |
| `disabled`          | (Optional)
  `boolean | undefined`

  Markiert das Feld als deaktiviert und verändert dessen Darstellung.                                                                                                                                                                          |
| `error`             | (Optional)
  `string | undefined`

  Fehlertext, der unterhalb des Steuerelements angezeigt wird.                                                                                                                                                                                  |
| `onSelectionChange` | (Optional)
  `((key: string | number) => void) | undefined`

  Dieser Handler wird aufgerufen, wenn sich die Auswahl in Feldern mit Einfachauswahl ändert.                                                                                                                         |
| `placeholder`       | (Optional)
  `string | undefined`

  Text, der im Eingabefeld angezeigt wird, wenn es keinen Wert enthält.                                                                                                                                                                         |

### SearchFieldDataObject

| Eigenschaft | Typ                       |
| ----------- | ------------------------- |
| `id`        | (Erforderlich)
  `string` |
| `value`     | (Erforderlich)
  `string` |

#### Mehrfachauswahl

### Eigenschaften von MultiSearchFieldProps

| Eigenschaft         | Typ                                                                                                                                                                                                                                                                                |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data`              | (Erforderlich)
  `SearchFieldDataObject[]`

  Ein Array von Datenelementen, die in den Suchergebnissen des SearchFields angezeigt werden sollen.

  Verwandte Typen: [SearchFieldDataObject](https://docs.stripe.com/stripe-apps/components/searchfield.md#searchfielddataobject). |
| `label`             | (Erforderlich)
  `string`

  Text, der das Steuerelement beschreibt. Er ist sichtbar und anklickbar.                                                                                                                                                                               |
| `selectionMode`     | (Erforderlich)
  `"multiple"`                                                                                                                                                                                                                                                      |
| `defaultSelected`   | (Optional)
  `(string | number)[] | undefined`

  Anfänglich ausgewählte Elemente in der Sammlung.                                                                                                                                                                                 |
| `description`       | (Optional)
  `string | undefined`

  Beschreibender Text, der neben der Beschriftung des Steuerelements angezeigt wird.                                                                                                                                                            |
| `disabled`          | (Optional)
  `boolean | undefined`

  Markiert das Feld als deaktiviert und verändert dessen Darstellung.                                                                                                                                                                          |
| `error`             | (Optional)
  `string | undefined`

  Fehlertext, der unterhalb des Steuerelements angezeigt wird.                                                                                                                                                                                  |
| `onSelectionChange` | (Optional)
  `((keys: Set<string | number>) => void) | undefined`

  Handler, der aufgerufen wird, wenn sich die Auswahl in Feldern mit Mehrfachauswahl ändert.                                                                                                                    |
| `placeholder`       | (Optional)
  `string | undefined`

  Text, der im Eingabefeld angezeigt wird, wenn es keinen Wert enthält.                                                                                                                                                                         |

### SearchFieldDataObject

| Eigenschaft | Typ                       |
| ----------- | ------------------------- |
| `id`        | (Erforderlich)
  `string` |
| `value`     | (Erforderlich)
  `string` |

## Weitere Beispiele

### Deaktiviert

### Beschreibung

### Fehler

### Platzhalter


## See also

- [Entwurfsmuster als Orientierung](https://docs.stripe.com/stripe-apps/patterns.md)
- [App gestalten](https://docs.stripe.com/stripe-apps/style.md)
- [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)