Input

Ein Pill-Textfeld im sekundären Material mit sanftem Fokusschein.

Quelltext
import { Input } 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).

  • leadingIcon
    IconSvgElement

    Ein Symbol vor dem Text.

  • optional
    boolean

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

  • prefix
    ReactNode

    Text vor dem Wert: „https://“.

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

    Die Höhe des Eingabefelds.

  • suffix
    ReactNode

    Text nach dem Wert: „USD“, „/ Min.“.

  • trailing
    ReactNode

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