{"name":"input-group","title":"Input Group","description":"Add addons, buttons, and helper content to inputs.","installCommand":"bunx marko-ui add input-group -y","usageTags":"<InputGroup>, <InputGroupInput>, <InputGroupAddon>","importSnippet":"import InputGroup from \"@/components/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@/components/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@/components/ui/input-group/addon.marko\";","usageSnippet":"<InputGroup>\n  <InputGroupInput placeholder=\"Search...\" />\n  <InputGroupAddon>\n    <Icon name=\"Search\"/>\n  </InputGroupAddon>\n</InputGroup>","tags":["InputGroup","InputGroupAddon","InputGroupButton","InputGroupInput","InputGroupText","InputGroupTextarea"],"parts":[],"props":[{"name":"disabled","type":"boolean","required":false,"description":"Marks the group as disabled. Sets `aria-disabled=\"true\"` on the root (the\nARIA signal that the group's addons are dimmed for) and `data-disabled`,\nwhich every descendant addon restyles against via `group-data-*`\nselectors — mirrors `Field`'s `disabled` prop. Does not itself disable\nthe inner control; pass `disabled` to `InputGroupInput`/\n`InputGroupTextarea` (or a custom control) too, same as `Field`."}],"events":[],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"input-group-demo","title":"Default","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\n\n<InputGroup>\n  <InputGroupInput placeholder=\"Search...\" />\n  <InputGroupAddon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n      <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n    </svg>\n  </InputGroupAddon>\n</InputGroup>","description":"An `InputGroupAddon` defaults to `align=\"inline-start\"` and sits before the input in the DOM for proper focus handling."},{"id":"input-group-inline-start","title":"Inline start","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\n\n<InputGroup>\n  <InputGroupAddon align=\"inline-start\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n      <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n    </svg>\n  </InputGroupAddon>\n  <InputGroupInput placeholder=\"Username\" />\n</InputGroup>","description":"Use `align=\"inline-start\"` to position the addon at the start of the input. This is the default."},{"id":"input-group-inline-end","title":"Inline end","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport InputGroupText from \"@marko-ui/shadcn/ui/input-group/text.marko\";\n\n<InputGroup>\n  <InputGroupInput placeholder=\"Email\" type=\"email\" />\n  <InputGroupAddon align=\"inline-end\">\n    <InputGroupText>@company.com</InputGroupText>\n  </InputGroupAddon>\n</InputGroup>","description":"Use `align=\"inline-end\"` to position the addon at the end of the input."},{"id":"input-group-block-start","title":"Block start","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupTextarea from \"@marko-ui/shadcn/ui/input-group/textarea.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport InputGroupText from \"@marko-ui/shadcn/ui/input-group/text.marko\";\n\n<InputGroup>\n  <InputGroupAddon align=\"block-start\">\n    <InputGroupText>Comment</InputGroupText>\n  </InputGroupAddon>\n  <InputGroupTextarea placeholder=\"Write your comment here...\" />\n</InputGroup>","description":"Use `align=\"block-start\"` to position the addon above the input, most useful with `InputGroupTextarea`."},{"id":"input-group-block-end","title":"Block end","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupTextarea from \"@marko-ui/shadcn/ui/input-group/textarea.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport InputGroupButton from \"@marko-ui/shadcn/ui/input-group/button.marko\";\n\n<InputGroup>\n  <InputGroupTextarea placeholder=\"Write your comment here...\" />\n  <InputGroupAddon align=\"block-end\">\n    <InputGroupButton size=\"sm\" variant=\"default\">Post</InputGroupButton>\n  </InputGroupAddon>\n</InputGroup>","description":"Use `align=\"block-end\"` to position the addon below the input."},{"id":"input-group-icon","title":"Icon","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\n\n<div class=\"grid w-full max-w-sm gap-6\">\n  <InputGroup>\n    <InputGroupInput placeholder=\"Search...\"/>\n    <InputGroupAddon>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n      </svg>\n    </InputGroupAddon>\n  </InputGroup>\n  <InputGroup>\n    <InputGroupInput type=\"email\" placeholder=\"Enter your email\"/>\n    <InputGroupAddon>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"/>\n        <path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"/>\n      </svg>\n    </InputGroupAddon>\n  </InputGroup>\n  <InputGroup>\n    <InputGroupInput placeholder=\"Card number\"/>\n    <InputGroupAddon>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"/>\n        <line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\"/>\n      </svg>\n    </InputGroupAddon>\n    <InputGroupAddon align=\"inline-end\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M20 6 9 17l-5-5\"/>\n      </svg>\n    </InputGroupAddon>\n  </InputGroup>\n  <InputGroup>\n    <InputGroupInput placeholder=\"Card number\"/>\n    <InputGroupAddon align=\"inline-end\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\n      </svg>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n        <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"/>\n        <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"/>\n      </svg>\n    </InputGroupAddon>\n  </InputGroup>\n</div>","description":"Any icon or inline SVG can sit in an `InputGroupAddon` on either edge of the input."},{"id":"input-group-text","title":"Text","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport InputGroupButton from \"@marko-ui/shadcn/ui/input-group/button.marko\";\n\n<InputGroup>\n  <InputGroupAddon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n      <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n    </svg>\n  </InputGroupAddon>\n  <InputGroupInput placeholder=\"Username\" />\n  <InputGroupAddon align=\"inline-end\">\n    <InputGroupButton size=\"xs\" variant=\"secondary\">Check</InputGroupButton>\n  </InputGroupAddon>\n</InputGroup>","description":"`InputGroupText` renders muted helper text or labels that share the group's addon padding."},{"id":"input-group-button","title":"Button","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport InputGroupButton from \"@marko-ui/shadcn/ui/input-group/button.marko\";\n\n<InputGroup>\n  <InputGroupInput placeholder=\"Search documentation...\" />\n  <InputGroupAddon align=\"inline-end\">\n    <InputGroupButton size=\"icon-xs\" aria-label=\"Search\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n      </svg>\n    </InputGroupButton>\n  </InputGroupAddon>\n</InputGroup>","description":"`InputGroupButton` renders a compact button sized to sit inside the group; pass `size=\"icon-xs\"` for icon-only actions."},{"id":"input-group-kbd","title":"Kbd","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport Kbd from \"@marko-ui/shadcn/ui/kbd/kbd.marko\";\n\n<InputGroup class=\"max-w-sm\">\n  <InputGroupInput placeholder=\"Search...\"/>\n  <InputGroupAddon>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-muted-foreground\">\n      <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n      <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n    </svg>\n  </InputGroupAddon>\n  <InputGroupAddon align=\"inline-end\">\n    <Kbd>⌘K</Kbd>\n  </InputGroupAddon>\n</InputGroup>","description":"Pair `InputGroupAddon` with `Kbd` to show a keyboard shortcut for the input's action."},{"id":"input-group-dropdown","title":"Dropdown","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport InputGroupButton from \"@marko-ui/shadcn/ui/input-group/button.marko\";\nimport DropdownMenu from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\n\nstatic const FILE_ITEMS = [\n  { value: \"settings\", label: \"Settings\" },\n  { value: \"copy-path\", label: \"Copy path\" },\n  { value: \"open-location\", label: \"Open location\" },\n];\n\nstatic const SEARCH_ITEMS = [\n  { value: \"documentation\", label: \"Documentation\" },\n  { value: \"blog-posts\", label: \"Blog Posts\" },\n  { value: \"changelog\", label: \"Changelog\" },\n];\n\n<div class=\"grid w-full max-w-sm gap-4\">\n  <InputGroup>\n    <InputGroupInput placeholder=\"Enter file name\"/>\n    <InputGroupAddon align=\"inline-end\">\n      <DropdownMenu items=FILE_ITEMS>\n        <@trigger|triggerProps|>\n          <InputGroupButton variant=\"ghost\" aria-label=\"More\" size=\"icon-xs\" ...triggerProps>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"1\"/>\n              <circle cx=\"19\" cy=\"12\" r=\"1\"/>\n              <circle cx=\"5\" cy=\"12\" r=\"1\"/>\n            </svg>\n          </InputGroupButton>\n        </@trigger>\n      </DropdownMenu>\n    </InputGroupAddon>\n  </InputGroup>\n  <InputGroup>\n    <InputGroupInput placeholder=\"Enter search query\"/>\n    <InputGroupAddon align=\"inline-end\">\n      <DropdownMenu items=SEARCH_ITEMS>\n        <@trigger|triggerProps|>\n          <InputGroupButton variant=\"ghost\" class=\"pr-1.5! text-xs\" ...triggerProps>\n            Search In...\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"size-3\">\n              <path d=\"m6 9 6 6 6-6\"/>\n            </svg>\n          </InputGroupButton>\n        </@trigger>\n      </DropdownMenu>\n    </InputGroupAddon>\n  </InputGroup>\n</div>","description":"An `InputGroupButton` can open a `DropdownMenu` by rendering it inside the menu's trigger render-prop."},{"id":"input-group-spinner","title":"Spinner","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport InputGroupText from \"@marko-ui/shadcn/ui/input-group/text.marko\";\nimport Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\n\n<div class=\"grid w-full max-w-sm gap-4\">\n  <InputGroup>\n    <InputGroupInput placeholder=\"Searching...\"/>\n    <InputGroupAddon align=\"inline-end\">\n      <Spinner/>\n    </InputGroupAddon>\n  </InputGroup>\n  <InputGroup>\n    <InputGroupInput placeholder=\"Processing...\"/>\n    <InputGroupAddon>\n      <Spinner/>\n    </InputGroupAddon>\n  </InputGroup>\n  <InputGroup>\n    <InputGroupInput placeholder=\"Saving changes...\"/>\n    <InputGroupAddon align=\"inline-end\">\n      <InputGroupText>Saving...</InputGroupText>\n      <Spinner/>\n    </InputGroupAddon>\n  </InputGroup>\n  <InputGroup>\n    <InputGroupInput placeholder=\"Refreshing data...\"/>\n    <InputGroupAddon>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"animate-spin\">\n        <path d=\"M21 12a9 9 0 1 1-6.219-8.56\"/>\n      </svg>\n    </InputGroupAddon>\n    <InputGroupAddon align=\"inline-end\">\n      <InputGroupText class=\"text-muted-foreground\">Please wait...</InputGroupText>\n    </InputGroupAddon>\n  </InputGroup>\n</div>","description":"Show a `Spinner` in an addon to indicate the input's async state, such as searching or saving."},{"id":"input-group-textarea","title":"Textarea","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupTextarea from \"@marko-ui/shadcn/ui/input-group/textarea.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport InputGroupButton from \"@marko-ui/shadcn/ui/input-group/button.marko\";\n\n<InputGroup>\n  <InputGroupAddon align=\"block-start\">\n    <InputGroupButton size=\"sm\" variant=\"ghost\">Bold</InputGroupButton>\n    <InputGroupButton size=\"sm\" variant=\"ghost\">Italic</InputGroupButton>\n  </InputGroupAddon>\n  <InputGroupTextarea placeholder=\"Type your message...\" rows=\"4\" />\n  <InputGroupAddon align=\"block-end\">\n    <InputGroupButton size=\"sm\" variant=\"default\">Send</InputGroupButton>\n  </InputGroupAddon>\n</InputGroup>","description":"`InputGroupTextarea` pairs with block-aligned addons to build a comment or chat composer."},{"id":"input-group-disabled","title":"Disabled","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\n\n<InputGroup disabled>\n  <InputGroupInput placeholder=\"Disabled\" disabled />\n  <InputGroupAddon align=\"inline-end\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"/>\n      <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>\n    </svg>\n  </InputGroupAddon>\n</InputGroup>","description":"Disabling the control also dims the whole group and disables pointer interaction on its addons."},{"id":"input-group-invalid","title":"Invalid","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\n\n<InputGroup>\n  <InputGroupInput placeholder=\"Invalid value\" aria-invalid=\"true\" />\n  <InputGroupAddon align=\"inline-end\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n      <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n      <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n    </svg>\n  </InputGroupAddon>\n</InputGroup>","description":"Set `aria-invalid=\"true\"` on the control to switch the group's focus ring and border to the destructive color.","essential":true},{"id":"input-group-custom","title":"Custom Input","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport InputGroupButton from \"@marko-ui/shadcn/ui/input-group/button.marko\";\n\n<div class=\"grid w-full max-w-sm gap-6\">\n  <InputGroup>\n    <textarea\n      data-slot=\"input-group-control\"\n      class=\"flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm\"\n      placeholder=\"Autoresize textarea...\"\n    />\n    <InputGroupAddon align=\"block-end\">\n      <InputGroupButton class=\"ml-auto\" size=\"sm\" variant=\"default\">Submit</InputGroupButton>\n    </InputGroupAddon>\n  </InputGroup>\n</div>","description":"Add `data-slot=\"input-group-control\"` to a custom control for automatic focus-state handling. Upstream wraps `react-textarea-autosize`; this port uses a plain `<textarea>` with CSS `field-sizing-content` for the same autosize behavior without a React-only dependency."},{"id":"input-group-rtl","title":"RTL","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport InputGroupButton from \"@marko-ui/shadcn/ui/input-group/button.marko\";\nimport InputGroupText from \"@marko-ui/shadcn/ui/input-group/text.marko\";\nimport InputGroupTextarea from \"@marko-ui/shadcn/ui/input-group/textarea.marko\";\nimport Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\n\n<div class=\"grid w-full max-w-sm gap-6\" dir=\"rtl\">\n  <InputGroup class=\"max-w-xs\">\n    <InputGroupInput placeholder=\"بحث...\" dir=\"rtl\"/>\n    <InputGroupAddon>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n      </svg>\n    </InputGroupAddon>\n    <InputGroupAddon align=\"inline-end\">١٢ نتيجة</InputGroupAddon>\n  </InputGroup>\n  <InputGroup>\n    <InputGroupInput placeholder=\"جاري البحث...\" dir=\"rtl\"/>\n    <InputGroupAddon align=\"inline-end\">\n      <Spinner/>\n    </InputGroupAddon>\n  </InputGroup>\n  <InputGroup>\n    <InputGroupInput placeholder=\"جاري حفظ التغييرات...\" dir=\"rtl\"/>\n    <InputGroupAddon align=\"inline-end\">\n      <InputGroupText>جاري الحفظ...</InputGroupText>\n      <Spinner/>\n    </InputGroupAddon>\n  </InputGroup>\n  <FieldGroup class=\"max-w-sm\">\n    <Field>\n      <FieldLabel for=\"input-group-rtl-textarea\">منطقة النص</FieldLabel>\n      <InputGroup>\n        <InputGroupTextarea id=\"input-group-rtl-textarea\" placeholder=\"اكتب تعليقًا...\" dir=\"rtl\"/>\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupText>٠/٢٨٠</InputGroupText>\n          <InputGroupButton variant=\"default\" size=\"sm\" class=\"ms-auto\">نشر</InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <FieldDescription>تذييل موضع أسفل منطقة النص.</FieldDescription>\n    </Field>\n  </FieldGroup>\n</div>","description":"InputGroup's parts use Tailwind logical properties, so they restyle correctly under `dir=\"rtl\"` with no component changes — put `dir=\"rtl\"` on the group (or an ancestor) and every part follows."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","requires":["icon"],"nativeAttributes":"div","subcomponents":[{"name":"addon","props":[{"name":"align","type":"'inline-start' | 'inline-end' | 'block-start' | 'block-end' | null | undefined","required":false,"default":"inline-start"}],"nativeAttributes":"div"},{"name":"button","props":[{"name":"size","type":"'sm' | 'xs' | 'icon-xs' | 'icon-sm' | null | undefined","required":false,"default":"xs"}],"nativeAttributes":"button"},{"name":"input","props":[],"nativeAttributes":"input"},{"name":"text","props":[],"nativeAttributes":"span"},{"name":"textarea","props":[],"nativeAttributes":"textarea"}]}