# SearchField

Ein SearchField ist ein Eingabefeld, mit dem gezielt nach Inhalten innerhalb einer Anwendung gesucht werden kann.

## Overview

# Playground

Verwende `<SearchField />`, um ein SearchField darzustellen.

```tsx
import { SearchField } from "@mittwald/flow-react-components";

<SearchField />
```

---

# Kombiniere mit ...

## React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component
[Form (React Hook Form)](/04-components/react-hook-form/form/overview).

```tsx
import {
  SearchField,
  Section,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Form,
  SubmitButton,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/04-components/actions/action/examples/lib";

export default () => {
  const form = useForm<{ search: string }>();
  const Field = typedField(form);

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="search"
          rules={{
            required: "Bitte gib etwas in die Suche ein",
          }}
        >
          <SearchField />
        </Field>
        <SubmitButton>Suchen</SubmitButton>
      </Form>
    </Section>
  );
}
```