Autocomplete

Freier Text mit Vorschlägen.

Endpoint

<div className="w-320">
      <Autocomplete
        label="Endpoint"
        leadingIcon={icons.route}
        suggestions={["/v1/responses", "/v1/chat/completions", "/v1/messages", "/v1/embeddings"]}
        placeholder="/v1/…"
      />
    </div>

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

Props

aria-label
string
Der zugängliche Name, wenn es keine sichtbare Beschriftung gibt.
defaultValue
string
Der Text im Eingabefeld beim ersten Rendern.
description
ReactNode
Ein Satz Hilfe unter der Beschriftung.
disabled
boolean
Schaltet es aus: Es lässt sich nicht verwenden und wirkt abgeblendet.
id
string
Die ID des Steuerelements, damit eine Beschriftung an anderer Stelle darauf verweisen kann.
label
ReactNode
Die sichtbare Beschriftung.
layout
"horizontal" | "vertical"
Die Beschriftung über dem Steuerelement (vertical) oder daneben (horizontal).
leadingIcon
IconSvgElement
Ein Symbol am Anfang des Eingabefelds.
name
string
Der Feldname, unter dem der Wert mit einem Formular gesendet wird.
onValueChange
((value: string) => void)
Wird bei jeder Änderung mit dem Text aufgerufen.
optional
boolean
Ergänzt die Beschriftung um „Optional“, für Formulare, in denen die meisten Felder Pflicht sind.
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.
suggestions
string[]
Vorschläge; der Wert bleibt freier Text.
value
string
Der Text im Eingabefeld, bei gesteuertem Wert.