{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "rating",
  "name": "Rating",
  "category": "Forms",
  "description": "Star rating built from radio buttons, so it submits with a form and needs no JavaScript.",
  "tags": [
    "rating",
    "stars",
    "review",
    "score"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "star rating input",
      "rate a product",
      "review stars"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "review-summary"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/rating",
  "markdownUrl": "https://mian.ro/ai/components/rating.md",
  "classes": [
    {
      "name": "mn-rating",
      "description": "A fieldset of radios in reverse order."
    },
    {
      "name": "mn-rating-sm · mn-rating-lg",
      "description": "Sizes."
    }
  ],
  "accessibility": [
    "Each star is a radio with a text label (\"3 stars\"), so it is announced and arrow-keyable. Inputs are listed highest first for the CSS; the visual order is still left to right."
  ],
  "examples": [
    {
      "title": "Basic",
      "description": null,
      "html": "<fieldset class=\"mn-rating\" aria-label=\"Rating\">\n  <input type=\"radio\" id=\"r5\" name=\"rating\" value=\"5\"><label for=\"r5\" title=\"5 stars\"><span class=\"mn-sr-only\">5 stars</span></label>\n  <input type=\"radio\" id=\"r4\" name=\"rating\" value=\"4\" checked><label for=\"r4\" title=\"4 stars\"><span class=\"mn-sr-only\">4 stars</span></label>\n  <input type=\"radio\" id=\"r3\" name=\"rating\" value=\"3\"><label for=\"r3\" title=\"3 stars\"><span class=\"mn-sr-only\">3 stars</span></label>\n  <input type=\"radio\" id=\"r2\" name=\"rating\" value=\"2\"><label for=\"r2\" title=\"2 stars\"><span class=\"mn-sr-only\">2 stars</span></label>\n  <input type=\"radio\" id=\"r1\" name=\"rating\" value=\"1\"><label for=\"r1\" title=\"1 star\"><span class=\"mn-sr-only\">1 star</span></label>\n</fieldset>"
    }
  ],
  "css": ".mn-rating { --_r: var(--_c, #f59e0b); display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border: 0; margin: 0; padding: 0; }\n.mn-rating > input { position: absolute; opacity: 0; width: 1px; height: 1px; }\n.mn-rating > label {\n  width: 1.5rem; height: 1.5rem; cursor: pointer;\n  background: var(--mn-input);\n  clip-path: polygon(50% 0, 61.8% 35.3%, 100% 35.3%, 69.1% 57.1%, 80.9% 92.7%, 50% 70.8%, 19.1% 92.7%, 30.9% 57.1%, 0 35.3%, 38.2% 35.3%);\n  transition: background-color var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease);\n}\n.mn-rating > input:checked ~ label,\n.mn-rating:not(:has(input:disabled)) > label:hover, .mn-rating:not(:has(input:disabled)) > label:hover ~ label { background: var(--_r); }\n.mn-rating:not(:has(input:disabled)) > label:hover { transform: scale(1.1); }\n.mn-rating > input:focus-visible + label { outline: 2px solid var(--mn-ring); outline-offset: 2px; }\n.mn-rating-sm > label { width: 1.1rem; height: 1.1rem; }\n.mn-rating-lg > label { width: 2rem; height: 2rem; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/rating.json"
  }
}