InputGroup

Zusätze in der Pill: Text, Symbole, ein Ghost-Kreis oder eine Tastenkappe, mit einem gemeinsamen Fokusschein.

https:///v1

<div className="flex w-400 flex-col gap-12">
      <InputGroup>
        <InputGroup.Addon>https://</InputGroup.Addon>
        <InputGroup.Input aria-label="Host" placeholder="gateway.northwind.example" />
        <InputGroup.Addon>/v1</InputGroup.Addon>
      </InputGroup>
      <InputGroup trailingButton>
        <InputGroup.Input aria-label="Token" defaultValue="sk-kso-AbC123…wxyz" className="mono text-small" />
        <InputGroup.Button icon={icons.copy} aria-label="Copy" />
      </InputGroup>
      <InputGroup leadingIcon>
        <InputGroup.Addon icon={icons.search} />
        <InputGroup.Input aria-label="Search" placeholder="Search models" />
      </InputGroup>
    </div>

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

Props

disabled
boolean
Deaktiviert jedes Steuerelement der Gruppe.
invalid
boolean
Zeigt die ganze Gruppe als ungültig.
leadingIcon
boolean
Der führende Inhalt ist ein Symbol: Der linke Innenabstand sinkt um 2px (optisch).
readOnly
boolean
Zeigt den Wert, ohne dass er sich ändern lässt.
size
"md" | "sm" | "lg" | "xl" = md
Die Höhe der Gruppe.
trailingButton
boolean
Der nachfolgende Inhalt ist ein Button: Der rechte Innenabstand sinkt, damit der Kreis konzentrisch in der Pill sitzt.