InputGroup

胶囊内的附加内容：文字、图标、幽灵圆形按钮或按键帽，共用一个焦点光晕。

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";

属性

disabled
boolean
禁用组内所有控件。
invalid
boolean
将整个组显示为无效。
leadingIcon
boolean
前置内容是图标：左内边距减少 2px（视觉校正）。
readOnly
boolean
显示值，但不允许修改。
size
"md" | "sm" | "lg" | "xl" = md
组的高度。
trailingButton
boolean
后置内容是按钮：右内边距减少，使圆形按钮与胶囊同心。