SearchInput

Suche mit führendem Symbol, einem Leeren-Kreis, wenn befüllt, und einem Tastenhinweis, wo gewünscht.

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

Props

  • align
    "start" | "end"

    Ausrichtung des Werts; Zahlen stehen rechts, mit tabellarischen Ziffern.

  • description
    ReactNode

    Ein Satz Hilfe unter der Beschriftung.

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

  • onClear
    (() => void)

    Wird aufgerufen, wenn der Löschen-Button gedrückt wird.

  • optional
    boolean

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

  • placeholder
    string

    Standardmäßig „Suchen“ in der Sprache des LocaleProvider.

  • shortcut
    string[]

    Ein Tastenhinweis, solange das Feld leer ist: ["mod", "k"] oder ["/"].

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

    Die Höhe des Eingabefelds.

  • trailing
    ReactNode

    Ein beliebiges Element am Ende (ein Button, eine Kbd).