{
  "name": "input",
  "displayName": "Input",
  "type": "native",
  "isCustomElement": false,
  "tag": null,
  "nativeTag": "input",
  "selector": ".l-input",
  "subItemOf": null,
  "summary": "Inputs let users enter and edit text, numbers, dates, and other single-line values.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/input",
    "js": null
  },
  "properties": [],
  "attributes": [
    {
      "name": "type",
      "data": false,
      "values": [
        "text",
        "search",
        "number",
        "password",
        "email",
        "url",
        "tel",
        "date",
        "time"
      ],
      "description": "Native input type. `date`/`time` get custom picker icons; `search` gets a custom clear button."
    },
    {
      "name": "data-size",
      "data": true,
      "values": [
        "xs",
        "sm",
        "md",
        "lg",
        "xl"
      ],
      "description": "Control height on the shared `--l-size-control-*` scale (default `md`). Affects only the height, not the label or hint/error."
    },
    {
      "name": "placeholder",
      "data": false,
      "values": [],
      "description": "Native placeholder text."
    },
    {
      "name": "disabled",
      "data": false,
      "values": [],
      "description": "Disables the input."
    },
    {
      "name": "required",
      "data": false,
      "values": [],
      "description": "Marks the input as required for form submission."
    },
    {
      "name": "readonly",
      "data": false,
      "values": [],
      "description": "Makes the input read-only."
    },
    {
      "name": "aria-invalid",
      "data": false,
      "values": [],
      "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
    }
  ],
  "events": [],
  "methods": [],
  "slots": [],
  "cssClasses": [
    {
      "name": ".l-input",
      "description": "Base input style, applied to a text-like `<input>` (text, search, number, password, email, url, tel, date, time, …). Inside `l-form-field` or `l-input-group` a bare text input is auto-styled, so the class is optional there."
    }
  ],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--height",
      "default": "var(--l-form-control-height)",
      "description": "Control height."
    },
    {
      "name": "--border-radius",
      "default": "var(--l-form-control-border-radius)",
      "description": "Control border radius."
    },
    {
      "name": "--calendar-icon",
      "default": null,
      "description": "Date picker glyph as a `url()`. Masked, so color is taken from the control, not the image."
    },
    {
      "name": "--clock-icon",
      "default": null,
      "description": "Time picker glyph as a `url()`."
    },
    {
      "name": "--clear-icon",
      "default": null,
      "description": "Search clear glyph as a `url()`."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "Default",
      "language": "html",
      "code": "<input type=\"text\" class=\"l-input\" placeholder=\"Placeholder text\" />"
    },
    {
      "title": "With a trailing unit",
      "language": "html",
      "code": "<l-input-group>\n<input type=\"number\" placeholder=\"Placeholder text\" />\n<span>cm</span>\n</l-input-group>"
    },
    {
      "title": "With a leading icon",
      "language": "html",
      "code": "<l-input-group>\n<l-icon name=\"lucide:search\"></l-icon>\n<input type=\"search\" placeholder=\"Search\" />\n</l-input-group>"
    },
    {
      "title": "Password with a show/hide toggle",
      "language": "html",
      "code": "<l-input-group password-toggle>\n<input type=\"password\" autocomplete=\"current-password\" />\n</l-input-group>"
    },
    {
      "title": "In a field (no class needed)",
      "language": "html",
      "code": "<l-form-field>\n<label>Email</label>\n<input type=\"email\" />\n<l-hint>We'll never share it.</l-hint>\n</l-form-field>"
    }
  ]
}