{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "radio-card",
  "name": "Option cards",
  "category": "Forms",
  "description": "Selectable cards for shipping, plans or payment, and pill options for sizes and variants.",
  "tags": [
    "radio card",
    "option card",
    "selectable card",
    "shipping options",
    "plan picker",
    "size picker",
    "variant",
    "checkout",
    "choice"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "shipping options",
      "choose a plan",
      "payment method",
      "size picker",
      "option cards",
      "delivery choice"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/radio-card",
  "markdownUrl": "https://mian.ro/ai/components/radio-card.md",
  "classes": [
    {
      "name": "mn-choices",
      "description": "A <fieldset> of options with a <legend>. mn-choices-row lays them side by side."
    },
    {
      "name": "mn-choice",
      "description": "A <label>: an mn-radio (or mn-checkbox), mn-choice-title, mn-choice-desc and mn-choice-meta (price)."
    },
    {
      "name": "mn-choices-pills",
      "description": "Compact pills for sizes and variants; the input is hidden, the pill shows focus and selection."
    }
  ],
  "accessibility": [
    "Native radios: arrow keys move between options and the whole card is the click target.",
    "Disabled options stay visible and say why (“Sold out”)."
  ],
  "examples": [
    {
      "title": "Shipping",
      "description": null,
      "html": "<fieldset class=\"mn-choices\" style=\"max-width:28rem\"><legend>Delivery</legend>\n  <label class=\"mn-choice\"><input class=\"mn-radio\" type=\"radio\" name=\"ship\" checked><span class=\"mn-choice-title\">Standard</span><span class=\"mn-choice-desc\">3–5 working days, tracked</span><span class=\"mn-choice-meta\">Free</span></label>\n  <label class=\"mn-choice\"><input class=\"mn-radio\" type=\"radio\" name=\"ship\"><span class=\"mn-choice-title\">Express</span><span class=\"mn-choice-desc\">Tomorrow before 12:00</span><span class=\"mn-choice-meta\">€9</span></label>\n  <label class=\"mn-choice\"><input class=\"mn-radio\" type=\"radio\" name=\"ship\" disabled><span class=\"mn-choice-title\">Pick up in Horezu</span><span class=\"mn-choice-desc\">Studio closed until 1 October</span><span class=\"mn-choice-meta\">—</span></label>\n</fieldset>"
    },
    {
      "title": "Sizes",
      "description": null,
      "html": "<fieldset class=\"mn-choices mn-choices-pills\"><legend>Size</legend>\n  <label class=\"mn-choice\"><input type=\"radio\" name=\"size\" value=\"XS\">XS</label><label class=\"mn-choice\"><input type=\"radio\" name=\"size\" value=\"S\">S</label><label class=\"mn-choice\"><input type=\"radio\" name=\"size\" value=\"M\" checked>M</label><label class=\"mn-choice\"><input type=\"radio\" name=\"size\" value=\"L\">L</label><label class=\"mn-choice\"><input type=\"radio\" name=\"size\" value=\"XL\" disabled aria-label=\"XL, sold out\">XL</label>\n</fieldset>"
    }
  ],
  "css": ".mn-choices { display: grid; gap: .6rem; min-inline-size: 0; margin: 0; padding: 0; border: 0; }\n.mn-choices > legend { grid-column: 1 / -1; float: left; width: 100%; margin: 0 0 .6rem; padding: 0; font: 500 var(--mn-text-sm)/1.3 var(--mn-font); }\n.mn-choice {\n  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .15rem .8rem; align-items: center;\n  padding: .9rem 1rem; border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-box); background: var(--mn-surface); color: var(--mn-fg); cursor: pointer;\n  transition: border-color var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease);\n}\n.mn-choice > input { grid-row: span 2; }\n.mn-choice-title { font-weight: 600; font-size: .9375rem; }\n.mn-choice-desc { grid-column: 2; color: var(--mn-muted); font-size: var(--mn-text-sm); line-height: 1.45; }\n.mn-choice-meta { grid-column: 3; grid-row: 1 / span 2; font-weight: 600; font-variant-numeric: tabular-nums; }\n.mn-choice:hover { border-color: color-mix(in oklab, var(--mn-input), var(--mn-fg) 40%); }\n.mn-choice:has(input:checked) { border-color: var(--mn-primary); background: color-mix(in oklab, var(--mn-primary) 5%, var(--mn-surface)); box-shadow: 0 0 0 1px var(--mn-primary); }\n.mn-choice:has(input:disabled) { cursor: not-allowed; opacity: .55; }\n.mn-choices-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }\n.mn-choices-pills { display: flex; flex-wrap: wrap; gap: .5rem; }\n.mn-choices-pills > legend { flex: 0 0 100%; }\n.mn-choices-pills .mn-choice { display: inline-grid; grid-template-columns: auto; justify-items: center; min-width: 3rem; padding: .5rem .9rem; border-radius: var(--mn-radius-field); }\n.mn-choices-pills .mn-choice > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }\n.mn-choices-pills .mn-choice:has(input:focus-visible) { outline: 2px solid var(--mn-ring); outline-offset: 2px; }\n.mn-choices-pills .mn-choice:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); }\n.mn-choices-pills .mn-choice:has(input:disabled) { text-decoration: line-through; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/radio-card.json"
  }
}