Input Group
@/components/kamod-ui/input-group
Installation
Import InputGroup, InputGroupInput or InputGroupTextarea, InputGroupAddon, InputGroupText, InputGroupButton from `@/components/kamod-ui/input-group`.
pnpm add @kamod-ch/uiUsage
Place InputGroupInput or InputGroupTextarea first in the DOM; use InputGroupAddon align=inline-start | inline-end | block-start | block-end to position visually (shadcn recommendation).
import { InputGroup } from "@/components/kamod-ui/input-group";<InputGroup />Demo
Search field with trailing icon and result count (shadcn InputGroupDemo).
Usage
Minimal search + icon addon.
URL
Protocol prefix and Go button.
Username
@ prefix for handles.
Align: inline-start
Icon before the field; control stays first in DOM.
Icon at the start (visual).
Align: inline-end
Trailing icon (e.g. password visibility affordance).
Align: block-start
Addon row above input or textarea.
Align: block-end
Footer row with suffix or actions.
Icons
Multiple icon patterns in a grid.
Text addons
Currency, URL, domain suffix, character hint.
Kbd
Shortcut hint in inline-end addon.
Dropdown
InputGroupButton as dropdown trigger (Kamod Dropdown).
Spinner
Loading indicators in addons.
Textarea (code)
Block-start and block-end toolbars around a monospace textarea.
API Reference
Props, slots and variants for this component.
Input Group
Input Group component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| InputGroupAddon align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" |
| InputGroupButton size | "sm" | "icon-xs" | "icon-sm" | "sm" |
| InputGroupInput / Textarea | control (data-slot=input-group-control) | — |
Accessibility Notes
Label inputs clearly; use aria-label on icon-only InputGroupButton. Add-ons that open menus should expose aria-expanded via the dropdown trigger pattern.