mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-02-09 02:49:29 +08:00
47c47eaed2
* feat: add base and radix docs * feat: transform code for display * fix * fix * fix * fix * fix * chore: remove claude files * fix * fix * fix * chore: run format:write * fix * feat: add more examples * fix * feat: add aspect-ratio * feat: add avatar * feat: add badge * feat: add breadcrumb * fix * feat: add button * fix * fix * fix * feat: add calendar and card * feat: add carousel * fix: chart * feat: add checkbox * feat: add collapsible * feat: add combobox * feat: add command * feat: add context menu * feat: add data-table dialog and drawer * feat: dropdown-menu * feat: add date-picker * feat: add empty * feat: add field and hover-card * fix: input * feat: add input * feat: add input-group * feat: add input-otp * feat: add item * feat: add kbd and label * feat: add menubar * feat: add native-select * feat: add more components * feat: more components * feat: more components * feat: add skeleton, slider and sonner * feat: add spinner and switch * feat: add more components * fix: tabs * fix: tabs * feat: add docs for sidebar * fix * fix * fi * docs: update * fix: create page * fix * fix * chore: add changelog * fix
28 lines
33 KiB
JSON
28 lines
33 KiB
JSON
{
|
|
"$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/base-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/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n ButtonGroup,\n ButtonGroupText,\n} from \"@/registry/base-maia/ui/button-group\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-maia/ui/kbd\"\nimport {\n Popover,\n PopoverContent,\n PopoverDescription,\n PopoverHeader,\n PopoverTitle,\n PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { Spinner } from \"@/registry/base-maia/ui/spinner\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-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\n render={\n <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n }\n >\n <IconPlaceholder\n lucide=\"InfoIcon\"\n tabler=\"IconInfoCircle\"\n hugeicons=\"AlertCircleIcon\"\n phosphor=\"InfoIcon\"\n remixicon=\"RiInformationLine\"\n />\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\n render={\n <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n }\n >\n {country}{\" \"}\n <IconPlaceholder\n lucide=\"ChevronDownIcon\"\n tabler=\"IconChevronDown\"\n hugeicons=\"ArrowDownIcon\"\n phosphor=\"CaretDownIcon\"\n remixicon=\"RiArrowDownSLine\"\n />\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 render={<InputGroupAddon />} nativeButton={false}>\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 </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 ("data-disabled="true")\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"
|
|
} |