InputGroup

Addons inside the pill: text, icons, a ghost circle or a key cap, sharing one focus halo.

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
Turns off every control in the group.
invalid
boolean
Shows the whole group as invalid.
leadingIcon
boolean
Leading content is an icon: the left padding drops by 2px (optical).
readOnly
boolean
Shows the value without letting people change it.
size
"md" | "sm" | "lg" | "xl" = md
The height of the group.
trailingButton
boolean
Trailing content is a button: the right padding drops so the circle sits concentric in the pill.