{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "field",
  "name": "Field",
  "category": "Forms",
  "description": "Label, control, hint and error message wired together, plus form and fieldset layout.",
  "tags": [
    "form",
    "label",
    "hint",
    "error",
    "validation",
    "fieldset",
    "layout"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "form field",
      "label and hint",
      "form layout",
      "validation error",
      "fieldset"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/field",
  "markdownUrl": "https://mian.ro/ai/components/field.md",
  "classes": [
    {
      "name": "mn-field",
      "description": "Stacks a label, a control and its messages."
    },
    {
      "name": "mn-label · mn-req",
      "description": "Label · required marker."
    },
    {
      "name": "mn-hint · mn-error",
      "description": "Help text · error text. Link them with aria-describedby."
    },
    {
      "name": "mn-form · mn-form-row",
      "description": "Vertical form rhythm · responsive multi-column row."
    },
    {
      "name": "mn-fieldset",
      "description": "Groups related controls under a legend."
    }
  ],
  "accessibility": [
    "Always pair a label with its control using for/id.",
    "Point aria-describedby at the hint and the error; set aria-invalid=\"true\" when invalid.",
    "The required marker is visual, also set the required attribute on the control."
  ],
  "examples": [
    {
      "title": "Label, hint and error",
      "description": null,
      "html": "<form class=\"mn-form\" style=\"max-width:26rem\" novalidate>\n  <div class=\"mn-field\">\n    <label class=\"mn-label\" for=\"f-email\">Email<span class=\"mn-req\" aria-hidden=\"true\">*</span></label>\n    <input class=\"mn-input\" id=\"f-email\" type=\"email\" required placeholder=\"you@company.com\" aria-describedby=\"f-email-hint\">\n    <p class=\"mn-hint\" id=\"f-email-hint\">We'll never share it.</p>\n  </div>\n  <div class=\"mn-field\">\n    <label class=\"mn-label\" for=\"f-user\">Username</label>\n    <input class=\"mn-input\" id=\"f-user\" value=\"ad\" aria-invalid=\"true\" aria-describedby=\"f-user-err\">\n    <p class=\"mn-error\" id=\"f-user-err\">Must be at least 3 characters.</p>\n  </div>\n</form>"
    },
    {
      "title": "Form layout",
      "description": null,
      "html": "<form class=\"mn-form\" style=\"max-width:34rem\">\n  <div class=\"mn-form-row\">\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"f-first\">First name</label><input class=\"mn-input\" id=\"f-first\" autocomplete=\"given-name\"></div>\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"f-last\">Last name</label><input class=\"mn-input\" id=\"f-last\" autocomplete=\"family-name\"></div>\n  </div>\n  <fieldset class=\"mn-fieldset\">\n    <legend>Notifications</legend>\n    <label class=\"mn-check\"><input class=\"mn-checkbox\" type=\"checkbox\" checked> Product updates</label>\n    <label class=\"mn-check\"><input class=\"mn-checkbox\" type=\"checkbox\"> Weekly digest</label>\n  </fieldset>\n  <div class=\"mn-row\"><button class=\"mn-btn\" type=\"submit\">Save</button><button class=\"mn-btn mn-btn-ghost\" type=\"reset\">Cancel</button></div>\n</form>"
    }
  ],
  "css": ".mn-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }\n.mn-label { font: 500 var(--mn-text-sm)/1.3 var(--mn-font); color: var(--mn-fg); }\n.mn-label .mn-req { color: var(--mn-danger-text); margin-inline-start: 2px; }\n.mn-hint { margin: 0; font-size: calc(var(--mn-text-sm) - 1px); line-height: 1.45; color: var(--mn-muted); }\n.mn-error { margin: 0; font-size: calc(var(--mn-text-sm) - 1px); line-height: 1.45; color: var(--mn-danger-text); }\n.mn-fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }\n.mn-fieldset > legend { padding: 0; margin-bottom: .6rem; font: 600 var(--mn-text-sm)/1.3 var(--mn-font); }\n.mn-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-content: start; }\n.mn-form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/field.json"
  }
}