Input Group

Component

Preview

Preview react

Usage

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

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/input-group.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/input-group.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/input-group.json

Manual

components/ui/input-group.tsx

import { 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>
  )
}