{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "time-slots",
  "name": "Time slots",
  "category": "Forms",
  "description": "A grid of bookable times, available, nearly full or taken, built on radio buttons.",
  "tags": [
    "time slots",
    "booking",
    "appointment",
    "reservation",
    "schedule",
    "availability",
    "time picker",
    "calendar booking"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "appointment times",
      "book a time",
      "available slots",
      "booking module",
      "reservation time"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/time-slots",
  "markdownUrl": "https://mian.ro/ai/components/time-slots.md",
  "classes": [
    {
      "name": "mn-slots",
      "description": "A <fieldset> of slots with a <legend>; auto-filling columns."
    },
    {
      "name": "mn-slot",
      "description": "One slot: a <label> around a radio and the time. A <small> line adds context."
    },
    {
      "name": "mn-slot-few",
      "description": "Few places left: the note turns warning colour."
    },
    {
      "name": "input:disabled",
      "description": "A taken slot, struck through and not selectable."
    }
  ],
  "accessibility": [
    "It is a native radio group: Tab reaches it, arrow keys move between times, and screen readers announce “3 of 12”.",
    "Say what “few left” means in the note (“2 left”), and keep taken times visible but disabled so the day’s shape is clear."
  ],
  "examples": [
    {
      "title": "Time slots",
      "description": null,
      "html": "<fieldset class=\"mn-slots\" style=\"max-width:34rem\">\n  <legend>Friday 2 October</legend>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"09:00\">09:00</label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"09:30\" disabled>09:30<small>Taken</small></label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"10:00\" checked>10:00</label>\n  <label class=\"mn-slot mn-slot-few\"><input type=\"radio\" name=\"slot\" value=\"10:30\">10:30<small>2 left</small></label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"11:00\">11:00</label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"13:30\">13:30</label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"14:00\" disabled>14:00<small>Taken</small></label>\n  <label class=\"mn-slot mn-slot-few\"><input type=\"radio\" name=\"slot\" value=\"14:30\">14:30<small>1 left</small></label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"15:00\">15:00</label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"15:30\">15:30</label>\n</fieldset>"
    }
  ],
  "css": ".mn-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; min-inline-size: 0; margin: 0; padding: 0; border: 0; }\n.mn-slots > legend { grid-column: 1 / -1; float: left; width: 100%; margin: 0 0 .6rem; padding: 0; font: 500 var(--mn-text-sm)/1.3 var(--mn-font); color: var(--mn-fg); }\n.mn-slot {\n  position: relative; display: grid; place-items: center; align-content: center; gap: .1rem; min-height: var(--mn-size-lg); padding: .35rem .5rem;\n  border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-field); background: var(--mn-surface); color: var(--mn-fg);\n  font: 500 var(--mn-text-sm)/1.2 var(--mn-font); font-variant-numeric: tabular-nums; text-align: center; cursor: pointer;\n  transition: background-color var(--mn-duration) var(--mn-ease), border-color var(--mn-duration) var(--mn-ease), color var(--mn-duration) var(--mn-ease);\n}\n.mn-slot > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }\n.mn-slot small { color: var(--mn-muted); font-size: .6875rem; font-weight: 400; }\n.mn-slot-few small { color: var(--mn-warning-text); }\n.mn-slot:hover { border-color: var(--mn-fg); }\n.mn-slot:has(input:checked) { border-color: var(--mn-primary); background: var(--mn-primary); color: var(--mn-primary-fg); }\n.mn-slot:has(input:checked) small { color: inherit; opacity: .85; }\n.mn-slot:has(input:focus-visible) { outline: 2px solid var(--mn-ring); outline-offset: 2px; }\n.mn-slot:has(input:disabled) { cursor: not-allowed; border-color: transparent; background: var(--mn-surface-2); color: var(--mn-muted); text-decoration: line-through; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/time-slots.json"
  }
}