{
  "name": "form-field",
  "displayName": "Form field",
  "type": "progressive",
  "isCustomElement": true,
  "tag": "l-form-field",
  "nativeTag": null,
  "selector": "l-form-field",
  "subItemOf": null,
  "summary": "Progressively enhances a label + control + messages group: wires the\naccessibility plumbing (`id`/`for`, `aria-describedby`, `aria-invalid`,\nrequired marker) and picks an inline or stacked layout from the control type.\n\nStyling stays on the control (`.l-checkbox`, …); inside a field a bare control\nis auto-styled by the element CSS. Add `unstyled` to keep the ARIA wiring while\nopting out of that auto-styling (e.g. for a third-party control).",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/form-field",
    "js": "luxen-ui/form-field"
  },
  "properties": [
    {
      "name": "layout",
      "attribute": "layout",
      "type": "'inline' | 'stacked' | undefined",
      "default": null,
      "reflects": true,
      "description": "Layout, derived from the control type (`inline` for checkbox/radio/switch, otherwise `stacked`). Set one to force it."
    },
    {
      "name": "required",
      "attribute": "required",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Reflected when the control is required. Drives the label marker."
    },
    {
      "name": "optional",
      "attribute": "optional",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Reflected when the control is not required."
    },
    {
      "name": "invalid",
      "attribute": "invalid",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Reflected once the control is invalid after interaction (or set to force the invalid state)."
    },
    {
      "name": "unstyled",
      "attribute": "unstyled",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Opt out of auto-styling the control; the ARIA wiring is preserved."
    }
  ],
  "attributes": [],
  "events": [],
  "methods": [],
  "slots": [
    {
      "name": "",
      "description": "A `<label>`, one form control (a native `input` / `select` / `textarea`, or a form-associated custom element such as `l-slider`), and optional `.l-hint` / `.l-error` message elements, in any order."
    }
  ],
  "cssClasses": [
    {
      "name": ".l-hint",
      "description": "Helper text element. Always visible; linked via `aria-describedby`."
    },
    {
      "name": ".l-error",
      "description": "Error message element. Hidden until invalid, then revealed with `role=\"alert\"` and linked via `aria-describedby`."
    }
  ],
  "cssParts": [],
  "cssProperties": [],
  "commands": [],
  "examples": [
    {
      "title": null,
      "language": "html",
      "code": "<l-form-field>\n  <label>Subscribe to the newsletter</label>\n  <input type=\"checkbox\" />\n  <p class=\"l-hint\">One email a month, unsubscribe anytime.</p>\n  <p class=\"l-error\">Please make a choice to continue.</p>\n</l-form-field>"
    }
  ]
}