{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "checkbox",
  "name": "Checkbox",
  "category": "Forms",
  "description": "Native checkbox, restyled. Checked, indeterminate, disabled and invalid states; any colour role.",
  "tags": [
    "checkbox",
    "check",
    "boolean",
    "agree",
    "multi select"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "checkbox",
      "agree to terms",
      "multiple choice",
      "select all rows"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/checkbox",
  "markdownUrl": "https://mian.ro/ai/components/checkbox.md",
  "classes": [
    {
      "name": "mn-checkbox",
      "description": "On an <input type=\"checkbox\">."
    },
    {
      "name": "mn-check",
      "description": "A label that lays out a control with its text."
    }
  ],
  "accessibility": [
    "It is a native checkbox, so Space toggles and state is announced. Wrap it in a <label> so the text is clickable.",
    "Set indeterminate from script: el.indeterminate = true."
  ],
  "examples": [
    {
      "title": "Basic",
      "description": null,
      "html": "<div class=\"mn-stack\">\n  <label class=\"mn-check\"><input class=\"mn-checkbox\" type=\"checkbox\" checked> Remember me</label>\n  <label class=\"mn-check\"><input class=\"mn-checkbox\" type=\"checkbox\"> Subscribe to the newsletter</label>\n  <label class=\"mn-check\"><input class=\"mn-checkbox\" type=\"checkbox\" disabled> Disabled</label>\n</div>"
    },
    {
      "title": "With description",
      "description": null,
      "html": "<label class=\"mn-check\">\n  <input class=\"mn-checkbox\" type=\"checkbox\" checked>\n  <span><span>Accept terms</span><p class=\"mn-hint\">You agree to our Terms of Service and Privacy Policy.</p></span>\n</label>"
    },
    {
      "title": "Colours",
      "description": null,
      "html": "<input class=\"mn-checkbox mn-accent\" type=\"checkbox\" checked aria-label=\"Accent\">\n<input class=\"mn-checkbox mn-success\" type=\"checkbox\" checked aria-label=\"Success\">\n<input class=\"mn-checkbox mn-danger\" type=\"checkbox\" checked aria-label=\"Danger\">\n<input class=\"mn-checkbox\" type=\"checkbox\" aria-label=\"Indeterminate\" data-indeterminate>\n<script>document.querySelectorAll('[data-indeterminate]').forEach(c => c.indeterminate = true)</script>"
    }
  ],
  "css": ".mn-checkbox, .mn-radio {\n  --_s: 1.1rem;\n  --_on: var(--_c, var(--mn-primary)); --_onf: var(--_cf, var(--mn-primary-fg));\n  appearance: none; -webkit-appearance: none;\n  display: inline-grid; place-content: center; flex: none;\n  width: var(--_s); height: var(--_s); margin: 0;\n  border: var(--mn-border-w) solid var(--mn-input);\n  border-radius: min(5px, var(--mn-radius-field));\n  background: var(--mn-surface);\n  cursor: pointer; vertical-align: middle;\n  box-shadow: var(--mn-shadow-sm);\n  transition: background-color var(--mn-duration) var(--mn-ease), border-color var(--mn-duration) var(--mn-ease);\n}\n.mn-checkbox::before {\n  content: \"\"; width: .62em; height: .62em;\n  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);\n  background: var(--_onf);\n  transform: scale(0); transition: transform var(--mn-duration) var(--mn-ease);\n}\n.mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background: var(--_on); border-color: var(--_on); }\n.mn-checkbox:checked::before { transform: scale(1); }\n.mn-checkbox:indeterminate::before { clip-path: none; height: 2px; width: .55em; transform: scale(1); }\n.mn-checkbox:focus-visible, .mn-radio:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-checkbox:disabled, .mn-radio:disabled { opacity: .5; cursor: not-allowed; }\n.mn-checkbox[aria-invalid=\"true\"], .mn-radio[aria-invalid=\"true\"] { border-color: var(--mn-danger); }\n.mn-check {\n  display: inline-flex; align-items: flex-start; gap: .6rem;\n  font: 400 var(--mn-text-sm)/1.4 var(--mn-font); cursor: pointer;\n}\n.mn-check > input { margin-top: .12em; }\n.mn-check:has(input:disabled) { opacity: .6; cursor: not-allowed; }\n.mn-check .mn-hint { margin-top: .15rem; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/checkbox.json"
  }
}