{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "radio",
  "name": "Radio",
  "category": "Forms",
  "description": "Native radio button, restyled. Use for one choice from a short list.",
  "tags": [
    "radio",
    "option",
    "choice",
    "single select"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "radio buttons",
      "single choice",
      "choose one"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "radio-card",
      "toggle-group"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/radio",
  "markdownUrl": "https://mian.ro/ai/components/radio.md",
  "classes": [
    {
      "name": "mn-radio",
      "description": "On an <input type=\"radio\">."
    }
  ],
  "accessibility": [
    "Group radios in a <fieldset> with a <legend>. Arrow keys move between options natively."
  ],
  "examples": [
    {
      "title": "Group",
      "description": null,
      "html": "<fieldset class=\"mn-fieldset\">\n  <legend>Delivery</legend>\n  <label class=\"mn-check\"><input class=\"mn-radio\" type=\"radio\" name=\"del\" checked> Standard: 3 to 5 days</label>\n  <label class=\"mn-check\"><input class=\"mn-radio\" type=\"radio\" name=\"del\"> Express: next day</label>\n  <label class=\"mn-check\"><input class=\"mn-radio\" type=\"radio\" name=\"del\" disabled> Same day (unavailable)</label>\n</fieldset>"
    }
  ],
  "css": ".mn-radio { border-radius: 50%; }\n.mn-radio::before {\n  content: \"\"; width: .44em; height: .44em; border-radius: 50%;\n  background: var(--_onf);\n  transform: scale(0); transition: transform var(--mn-duration) var(--mn-ease);\n}\n.mn-radio:checked::before { transform: scale(1); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/radio.json"
  }
}
