Combobox

Ein Pill-Eingabefeld mit gefilterter Liste: Treffer hervorgehoben, asynchrone Ergebnisse, Chips bei Mehrfachauswahl, Anlegen.

Quelltext
import { Combobox } from "@logicplanes/kaeso-ui";

Props

  • aria-label
    string

    Der zugängliche Name, wenn es keine sichtbare Beschriftung gibt.

  • defaultValue
    string | string[] | null

    Der Wert beim ersten Rendern, wenn die Komponente ihren Wert selbst verwaltet.

  • description
    ReactNode

    Ein Satz Hilfe unter der Beschriftung.

  • disabled
    boolean

    Schaltet es aus: Es lässt sich nicht verwenden und wirkt abgeblendet.

  • emptyText
    ReactNode

    Was die leere Liste sagt: „Keine passenden Modelle“. Standardmäßig „Keine Ergebnisse“ in der Sprache des LocaleProvider.

  • id
    string

    Die ID des Steuerelements, damit eine Beschriftung an anderer Stelle darauf verweisen kann.

  • invalid
    boolean

    Zeigt es als ungültig; zusammen mit einer Nachricht, die sagt, was zu korrigieren ist.

  • label
    ReactNode

    Die sichtbare Beschriftung.

  • layout
    "horizontal" | "vertical"

    Die Beschriftung über dem Steuerelement (vertical) oder daneben (horizontal).

  • loading
    boolean

    Zeigt oben in der Liste eine leise Fortschrittslinie (asynchrone Ergebnisse).

  • multiple
    boolean

    Erlaubt die Wahl mehrerer Optionen; value ist dann eine Liste.

  • name
    string

    Der Feldname, unter dem der Wert mit einem Formular gesendet wird.

  • onCreate
    ((label: string) => void)

    Bietet „„…“ anlegen“ an, wenn nichts genau passt.

  • onInputValueChange
    ((value: string) => void)

    Wird mit dem Text aufgerufen, der ins Eingabefeld getippt wird.

  • onValueChange
    ((value: string | null) => void) | ((value: string[]) => void)

    Wird mit dem gewählten Wert aufgerufen, mit multiple mit der Liste der Werte.

  • optional
    boolean

    Ergänzt die Beschriftung um „Optional“, für Formulare, in denen die meisten Felder Pflicht sind.

  • options
    ComboboxOption[]

    Die Optionen zur Auswahl.

  • placeholder
    string

    Text, der angezeigt wird, solange es keinen Wert gibt.

  • required
    boolean

    Markiert es in einem Formular als Pflichtfeld.

  • size
    "md" | "sm" | "lg" | "xl"

    Die Höhe des Eingabefelds.

  • value
    string | string[] | null

    Der gewählte Wert, mit multiple eine Liste von Werten, bei gesteuertem Wert.