input-group-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-group-example",
  "title": "Input Group",
  "registryDependencies": [
    "button",
    "button-group",
    "card",
    "dropdown-menu",
    "field",
    "input",
    "input-group",
    "kbd",
    "popover",
    "spinner",
    "textarea",
    "tooltip",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-maia/examples/input-group-example.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-maia/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-maia/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport { Spinner } from \"@/registry/radix-maia/ui/spinner\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}