Autocomplete

Autocomplete ergänzt eine Texteingabe um kontextbezogene Vorschläge.

Email(optional)

import {
  Option,
  Label,
  TextField,
  Autocomplete,
} from "@mittwald/flow-react-components";
import { useState } from "react";

export default () => {
  const [input, setInput] = useState("");

  const generateSuggestItems = () => {
    return [
      "example.com",
      "test.org",
      "email.net",
      "mail.com",
    ]
      .map((d) => {
        const email = `${input.split("@")[0]}@${d}`;
        return (
          <Option
            key={email}
            value={email}
            textValue={email}
          >
            {email}
          </Option>
        );
      })
      .filter(() => input);
  };

  return (
    <Autocomplete>
      <TextField value={input} onChange={setInput}>
        <Label>Email</Label>
      </TextField>
      {generateSuggestItems()}
    </Autocomplete>
  );
}

Best Practices

Zeige kontextbezogene Vorschläge an.
Filtere die Vorschlagsliste bei Bedarf sinnvoll vor. Das kann zum Beispiel nach Kategorien oder Kontext erfolgen.
Zeige bei leerem Eingabefeld zunächst keine Vorschläge an.

Autocomplete vs. ComboBox

Autocomplete und ComboBoxen sehen oft ähnlich aus, erfüllen aber unterschiedliche Zwecke.

Verwende Autocomplete, um z. B. ...

Usern zu ermöglichen, freie Eingaben zu machen, während Vorschläge zur Auswahl angezeigt werden.
bei langen oder dynamischen Datenlisten (z. B. Städte, Usernamen, Tags).

Verwende ComboBox, um z. B. ...

aus einer vordefinierten Liste von Optionen eine Auswahl zu treffen.
bei bekannten, überschaubaren Optionen (z. B. Sprachen, Kategorien, Geschlecht).

Benutzerdefinierte Filter

Schränke die Optionen, die dem User zur Auswahl stehen, mithilfe von Filtern ein.

Email(optional)

Kombiniere mit ...

SearchField

Nutze <Autocomplete /> mit einem SearchField, um die User beim Suchen mit Vorschlägen zu unterstützen.

Komponente(optional)

React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component Form (React Hook Form).

Properties

Property	Type	Default	Description
`children`	`ReactNode`	-
`className`	`string`	-	The elements class name.
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.
`ref`	`Ref<HTMLSpanElement>`	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
`key`	`Key`	-
`slot`	`string`	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`filter`	`((textValue: string, inputValue: string, node: Node<object>) => boolean)`	-	An optional filter function used to determine if a option should be included in the autocomplete list. Include this if the items you are providing to your wrapped collection aren't filtered by default.
`disableAutoFocusFirst`	`boolean`	false	Whether or not to focus the first item in the collection after a filter is performed. Note this is only applicable if virtual focus behavior is not turned off via `disableVirtualFocus`.
`disableVirtualFocus`	`boolean`	false	Whether the autocomplete should disable virtual focus, instead making the wrapped collection directly tabbable.

Components

Integrations