{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "swatch-picker",
  "name": "Swatch picker",
  "category": "Forms",
  "description": "Pick a colour (or any visual option) from round swatches. Real radio buttons underneath.",
  "tags": [
    "swatch",
    "color picker",
    "colour picker",
    "palette",
    "variant selector",
    "product options"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "colour picker",
      "product colour options",
      "variant swatches",
      "theme colour choice"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/swatch-picker",
  "markdownUrl": "https://mian.ro/ai/components/swatch-picker.md",
  "classes": [
    {
      "name": "mn-swatches",
      "description": "A fieldset of options."
    },
    {
      "name": "mn-swatch-option",
      "description": "A label with a radio inside; set --sw to its colour."
    },
    {
      "name": "mn-swatches-sm · mn-swatches-square",
      "description": "Smaller or square swatches."
    }
  ],
  "accessibility": [
    "Each radio needs an accessible name (aria-label), colour alone is not a name.",
    "Arrow keys move between options, as with any radio group; focus shows a ring."
  ],
  "examples": [
    {
      "title": "Colours",
      "description": null,
      "html": "<fieldset class=\"mn-swatches\">\n  <legend>Colour</legend>\n  <label class=\"mn-swatch-option\" style=\"--sw:#0a0a0a\"><input type=\"radio\" name=\"sw-1\" aria-label=\"Ink\" checked></label>\n  <label class=\"mn-swatch-option\" style=\"--sw:#e5e5e5\"><input type=\"radio\" name=\"sw-1\" aria-label=\"Flour\"></label>\n  <label class=\"mn-swatch-option\" style=\"--sw:#c8102e\"><input type=\"radio\" name=\"sw-1\" aria-label=\"Chilli\"></label>\n  <label class=\"mn-swatch-option\" style=\"--sw:#1f3fa6\"><input type=\"radio\" name=\"sw-1\" aria-label=\"Porcelain\"></label>\n  <label class=\"mn-swatch-option\" style=\"--sw:#3f6212\"><input type=\"radio\" name=\"sw-1\" aria-label=\"Scallion\"></label>\n  <label class=\"mn-swatch-option\" style=\"--sw:#d97706\"><input type=\"radio\" name=\"sw-1\" aria-label=\"Pumpkin\"></label>\n</fieldset>"
    }
  ],
  "css": ".mn-swatches { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; }\n.mn-swatches > legend { padding: 0; margin-bottom: .5rem; font: 500 var(--mn-text-sm)/1.3 var(--mn-font); }\n.mn-swatch-option {\n  --_sz: 1.9rem;\n  position: relative; display: inline-grid; place-items: center; width: var(--_sz); height: var(--_sz);\n  border-radius: 50%; background: var(--sw, var(--mn-primary)); cursor: pointer;\n  box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 12%, transparent);\n  transition: box-shadow var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease);\n}\n.mn-swatch-option > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }\n.mn-swatch-option:hover { transform: scale(1.08); }\n.mn-swatch-option:has(input:checked) { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--sw, var(--mn-primary)); }\n.mn-swatch-option:has(input:checked)::after { content: \"\"; width: 40%; height: 22%; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-15%) rotate(-45deg); filter: drop-shadow(0 0 1px rgb(0 0 0 / .5)); }\n.mn-swatch-option:has(input:focus-visible) { box-shadow: var(--mn-focus); }\n.mn-swatches-sm .mn-swatch-option { --_sz: 1.4rem; }\n.mn-swatches-square .mn-swatch-option { border-radius: var(--mn-radius-field); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/swatch-picker.json"
  }
}