{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "input-group",
  "name": "Input group",
  "category": "Forms",
  "description": "An input with leading or trailing addons, text, icons or buttons, inside one border.",
  "tags": [
    "input group",
    "addon",
    "prefix",
    "suffix",
    "icon input",
    "search"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "input with prefix",
      "url field",
      "currency input",
      "search with button"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/input-group",
  "markdownUrl": "https://mian.ro/ai/components/input-group.md",
  "classes": [
    {
      "name": "mn-input-group",
      "description": "The shared border."
    },
    {
      "name": "mn-addon",
      "description": "A text or icon segment."
    },
    {
      "name": "mn-addon-plain",
      "description": "An addon with no background, e.g. a search icon."
    },
    {
      "name": "svg (direct child)",
      "description": "A bare icon inside mn-input-group is placed as a plain leading or trailing addon."
    }
  ],
  "accessibility": [
    "Addons are visual. If an addon carries meaning (a currency, a domain), repeat it in the label or aria-describedby."
  ],
  "examples": [
    {
      "title": "Text addons",
      "description": null,
      "html": "<div class=\"mn-stack\" style=\"max-width:26rem\">\n  <div class=\"mn-input-group\"><span class=\"mn-addon\">https://</span><input class=\"mn-input\" aria-label=\"Website\" placeholder=\"mian.ro\"></div>\n  <div class=\"mn-input-group\"><input class=\"mn-input\" aria-label=\"Price in euro\" placeholder=\"0.00\" inputmode=\"decimal\"><span class=\"mn-addon\">EUR</span></div>\n</div>"
    },
    {
      "title": "Icon and button",
      "description": null,
      "html": "<div class=\"mn-stack\" style=\"max-width:26rem\">\n  <div class=\"mn-input-group\"><span class=\"mn-addon mn-addon-plain\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m20 20-3.5-3.5\"/></svg></span><input class=\"mn-input\" type=\"search\" aria-label=\"Search\" placeholder=\"Search components…\"></div>\n  <div class=\"mn-input-group\"><input class=\"mn-input\" type=\"email\" aria-label=\"Email\" placeholder=\"you@company.com\"><button class=\"mn-btn\">Subscribe</button></div>\n</div>"
    }
  ],
  "css": ".mn-input-group {\n  display: flex; align-items: stretch; width: 100%;\n  height: var(--mn-size-md);\n  border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-field);\n  background: var(--mn-surface); box-shadow: var(--mn-shadow-sm);\n  overflow: hidden;\n  transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease);\n}\n.mn-input-group:focus-within { border-color: var(--mn-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 25%, transparent); }\n.mn-input-group > .mn-input { height: 100%; border: 0; border-radius: 0; box-shadow: none; background: transparent; }\n.mn-input-group > .mn-input:focus { box-shadow: none; }\n.mn-addon {\n  display: inline-flex; align-items: center; gap: .4rem; flex: none;\n  padding: 0 .75rem;\n  background: var(--mn-surface-2); color: var(--mn-muted);\n  font: 400 var(--mn-text-sm)/1 var(--mn-font); white-space: nowrap;\n}\n.mn-addon:first-child { border-inline-end: var(--mn-border-w) solid var(--mn-input); }\n.mn-addon:last-child { border-inline-start: var(--mn-border-w) solid var(--mn-input); }\n.mn-addon-plain { background: transparent; border: 0 !important; padding-inline: .7rem .1rem; }\n.mn-addon-plain:last-child { padding-inline: .1rem .7rem; }\n.mn-addon svg { width: 1rem; height: 1rem; }\n.mn-input-group > .mn-btn { height: 100%; border-radius: 0; box-shadow: none; }\n/* A bare icon as a direct child is a plain leading (or trailing) addon. */\n.mn-input-group > svg { flex: none; align-self: center; width: 1rem; height: 1rem; margin-inline: .75rem -.2rem; color: var(--mn-muted); }\n.mn-input-group > svg:last-child { margin-inline: -.2rem .75rem; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/input-group.json"
  }
}