input-group-demo.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-group-demo",
  "type": "registry:example",
  "registryDependencies": [
    "input-group"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/input-group-demo.tsx",
      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/new-york-v4/ui/input-group\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york-v4/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                <IconInfoCircle />\n              </InputGroupButton>\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuItem>Auto</DropdownMenuItem>\n              <DropdownMenuItem>Agent</DropdownMenuItem>\n              <DropdownMenuItem>Manual</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}