labsUI

Input Group

Server-safe wrapper that fuses an Input with icons, text (https://, USD) or buttons into one field with a shared border and focus ring. Clicking an addon focuses the input.

npx @kznlabs/labsui add input-group
⌘K
https://
.dev
USD
import { InputGroup, InputGroupAddon } from "@/components/ui/input-group";import { Input } from "@/components/ui/input";export function SiteAddress() {  return (    <InputGroup>      <InputGroupAddon>https://</InputGroupAddon>      <Input aria-label="Site address" placeholder="labsui" className="px-0" />      <InputGroupAddon align="end">.dev</InputGroupAddon>    </InputGroup>  );}

<InputGroup>

One field made of an Input plus addons (icons, text like "https://", buttons). The group draws the border and focus ring; the inner Input drops its own (matched by data-slot).

Also accepts every <div> prop (none of its own).

<InputGroupAddon>

Text, icon or button beside the input. Clicking plain text focuses the input.

  • aligndefault "start"
    "start" | "end"

    Side of the control it sits on.

PropTypeDefault
align

Side of the control it sits on.

"start" | "end""start"

Also accepts every <div> prop.

* required. Every component also takes className.