mittwald Flow Logo

Components

SearchField

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

Playground

Verwende <SearchField />, um ein SearchField darzustellen.

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

import {
  Button,
  SearchField,
  Section,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Form,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/03-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>
        <Button type="submit">Suchen</Button>
      </Form>
    </Section>
  );
}

Overview