Input Group
Component
Section titled “Component” Preview react
import { InputGroup, InputGroup_addon } from "@/components/ui/input-group"
export function InputGroupDemo() {return ( <InputGroup className="w-full max-w-sm"> <InputGroup_addon>https://</InputGroup_addon> <input type="text" placeholder="example.com" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors" /> </InputGroup>)}Installation
Section titled “Installation”npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/input-group.jsonpnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/input-group.jsonbunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/input-group.jsonimport { type ComponentProps } from "react"import { cn } from "@/lib/utils"
export interface InputGroupProps extends ComponentProps<"div"> { label?: string}
export function InputGroup({ className, label, children, ...props }: InputGroupProps) { return ( <div className={cn("flex flex-col gap-1.5", className)} {...props}> {label && <label className="text-sm font-medium text-foreground">{label}</label>} <div className="flex items-center gap-2">{children}</div> </div> )}