Combobox
Ein Pill-Eingabefeld mit gefilterter Liste: Treffer hervorgehoben, asynchrone Ergebnisse, Chips bei Mehrfachauswahl, Anlegen.
<div className="w-320">
<Combobox label="Model" options={options} placeholder="Search models" emptyText="No models match" defaultValue="gpt-5" />
</div>import { Combobox } from "@logicplanes/kaeso-ui";Props
aria-labelstringDer zugängliche Name, wenn es keine sichtbare Beschriftung gibt.
defaultValuestring | string[] | nullDer Wert beim ersten Rendern, wenn die Komponente ihren Wert selbst verwaltet.
descriptionReactNodeEin Satz Hilfe unter der Beschriftung.
disabledbooleanSchaltet es aus: Es lässt sich nicht verwenden und wirkt abgeblendet.
emptyTextReactNodeWas die leere Liste sagt: „Keine passenden Modelle“. Standardmäßig „Keine Ergebnisse“ in der Sprache des LocaleProvider.
idstringDie ID des Steuerelements, damit eine Beschriftung an anderer Stelle darauf verweisen kann.
invalidbooleanZeigt es als ungültig; zusammen mit einer Nachricht, die sagt, was zu korrigieren ist.
labelReactNodeDie sichtbare Beschriftung.
layout"horizontal" | "vertical"Die Beschriftung über dem Steuerelement (
vertical) oder daneben (horizontal).loadingbooleanZeigt oben in der Liste eine leise Fortschrittslinie (asynchrone Ergebnisse).
multiplebooleanErlaubt die Wahl mehrerer Optionen;
valueist dann eine Liste.namestringDer 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
multiplemit der Liste der Werte.optionalbooleanErgänzt die Beschriftung um „Optional“, für Formulare, in denen die meisten Felder Pflicht sind.
optionsComboboxOption[]Die Optionen zur Auswahl.
placeholderstringText, der angezeigt wird, solange es keinen Wert gibt.
requiredbooleanMarkiert es in einem Formular als Pflichtfeld.
size"md" | "sm" | "lg" | "xl"Die Höhe des Eingabefelds.
valuestring | string[] | nullDer gewählte Wert, mit
multipleeine Liste von Werten, bei gesteuertem Wert.