Input Group

Component

Preview

Preview solid

Usage

import { InputGroup, InputGroup_addon } from "@/components/ui/input-group"

export function InputGroupDemo() {
return (
  <InputGroup class="w-full max-w-sm">
    <InputGroup_addon>https://</InputGroup_addon>
    <input
      type="text"
      placeholder="example.com"
      class="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/s/input-group.json

pnpm

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

bun

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

Manual

components/ui/input-group.tsx

import { type ComponentProps, splitProps } from "solid-js"
import { cn } from "@/lib/utils"

export interface InputGroupProps extends ComponentProps<"div"> {
  label?: string
}

export function InputGroup(props: InputGroupProps) {
  const [local, rest] = splitProps(props, ["class", "label", "children"])

  return (
    <div class={cn("flex flex-col gap-1.5", local.class)} {...rest}>
      {local.label && <label class="text-sm font-medium text-foreground">{local.label}</label>}
      <div class="flex items-center gap-2">{local.children}</div>
    </div>
  )
}