InputGroup
An input with addons — icons, text, buttons — inside one bordered field.
import { InputGroup } from "@cynco-labs/ui";Example
import { MagnifyingGlassIcon } from "@phosphor-icons/react";
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@cynco-labs/ui";
export default function InputGroupDemo() {
return (
<div className="max-w-[320px]">
<InputGroup>
<InputGroupAddon>
<MagnifyingGlassIcon size={14} />
</InputGroupAddon>
<InputGroupInput placeholder="Search invoices" />
<InputGroupAddon align="inline-end">
<InputGroupText>⌘K</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
);
}Use
Search fields, inputs with units or prefixes, inline submit buttons.
Props
InputGroupAddon (align inline-start · inline-end · block-start · block-end) holding InputGroupText or InputGroupButton, plus InputGroupInput or InputGroupTextarea.
Notes
Uses input-state-focus-within.