{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "switch",
  "name": "Switch",
  "category": "Forms",
  "description": "An on/off toggle for settings that apply immediately. A native checkbox with role=\"switch\".",
  "tags": [
    "switch",
    "toggle",
    "on off",
    "settings"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "toggle switch",
      "on off setting",
      "enable feature",
      "settings toggle"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/switch",
  "markdownUrl": "https://mian.ro/ai/components/switch.md",
  "classes": [
    {
      "name": "mn-switch",
      "description": "On an <input type=\"checkbox\" role=\"switch\">."
    },
    {
      "name": "mn-switch-sm · mn-switch-lg",
      "description": "Sizes."
    }
  ],
  "accessibility": [
    "Add role=\"switch\" so it is announced as on/off rather than checked/unchecked.",
    "Use a switch for immediate effect; use a checkbox inside forms that are submitted."
  ],
  "examples": [
    {
      "title": "Settings",
      "description": null,
      "html": "<ul class=\"mn-list\" style=\"max-width:26rem\">\n  <li><div class=\"mn-grow\"><div class=\"mn-list-title\">Airplane mode</div><div class=\"mn-list-desc\">Disable all wireless connections</div></div><input class=\"mn-switch\" type=\"checkbox\" role=\"switch\" aria-label=\"Airplane mode\"></li>\n  <li><div class=\"mn-grow\"><div class=\"mn-list-title\">Notifications</div><div class=\"mn-list-desc\">Push and email</div></div><input class=\"mn-switch\" type=\"checkbox\" role=\"switch\" checked aria-label=\"Notifications\"></li>\n</ul>"
    },
    {
      "title": "Sizes and colours",
      "description": null,
      "html": "<input class=\"mn-switch mn-switch-sm\" type=\"checkbox\" role=\"switch\" checked aria-label=\"Small\">\n<input class=\"mn-switch\" type=\"checkbox\" role=\"switch\" checked aria-label=\"Default\">\n<input class=\"mn-switch mn-switch-lg mn-success\" type=\"checkbox\" role=\"switch\" checked aria-label=\"Large success\">\n<input class=\"mn-switch\" type=\"checkbox\" role=\"switch\" disabled aria-label=\"Disabled\">"
    }
  ],
  "css": ".mn-switch {\n  --_w: 2.3rem; --_hh: 1.3rem;\n  --_on: var(--_c, var(--mn-primary)); --_onf: var(--_cf, var(--mn-primary-fg));\n  appearance: none; -webkit-appearance: none; flex: none;\n  position: relative; display: inline-block;\n  width: var(--_w); height: var(--_hh); margin: 0;\n  border: 0; border-radius: 999px;\n  background: var(--mn-input);\n  cursor: pointer; vertical-align: middle;\n  transition: background-color var(--mn-duration) var(--mn-ease);\n}\n.mn-switch::before {\n  content: \"\"; position: absolute; top: 2px; left: 2px;\n  width: calc(var(--_hh) - 4px); height: calc(var(--_hh) - 4px);\n  border-radius: 50%; background: #fff;\n  box-shadow: 0 1px 3px rgb(0 0 0 / .25);\n  transition: transform var(--mn-duration) var(--mn-ease);\n}\n.mn-switch:checked { background: var(--_on); }\n.mn-switch:checked::before { transform: translateX(calc(var(--_w) - var(--_hh))); background: var(--_onf); }\n.mn-switch:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-switch:disabled { opacity: .5; cursor: not-allowed; }\n.mn-switch-sm { --_w: 1.9rem; --_hh: 1.1rem; }\n.mn-switch-lg { --_w: 2.8rem; --_hh: 1.6rem; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/switch.json"
  }
}