{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "input",
  "name": "Input",
  "category": "Forms",
  "description": "Single-line text entry. Styles every native input type: text, email, password, search, number, date, time, color.",
  "tags": [
    "input",
    "text field",
    "textbox",
    "email",
    "password",
    "date",
    "search"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "text input",
      "email field",
      "search field",
      "date input",
      "form input"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/input",
  "markdownUrl": "https://mian.ro/ai/components/input.md",
  "classes": [
    {
      "name": "mn-input",
      "description": "Base input."
    },
    {
      "name": "mn-input-sm · mn-input-lg",
      "description": "Sizes."
    },
    {
      "name": "aria-invalid=\"true\"",
      "description": "Error state."
    }
  ],
  "accessibility": [
    "Use the right type and autocomplete values so mobile keyboards and password managers help.",
    "Placeholder is not a label."
  ],
  "examples": [
    {
      "title": "Types",
      "description": null,
      "html": "<div class=\"mn-stack\" style=\"max-width:22rem\">\n  <input class=\"mn-input\" type=\"text\" placeholder=\"Text\" aria-label=\"Text\">\n  <input class=\"mn-input\" type=\"password\" value=\"hunter2\" aria-label=\"Password\">\n  <input class=\"mn-input\" type=\"date\" aria-label=\"Date\">\n  <input class=\"mn-input\" type=\"search\" placeholder=\"Search…\" aria-label=\"Search\">\n</div>"
    },
    {
      "title": "Sizes",
      "description": null,
      "html": "<div class=\"mn-stack\" style=\"max-width:22rem\">\n  <input class=\"mn-input mn-input-sm\" placeholder=\"Small\" aria-label=\"Small\">\n  <input class=\"mn-input\" placeholder=\"Default\" aria-label=\"Default\">\n  <input class=\"mn-input mn-input-lg\" placeholder=\"Large\" aria-label=\"Large\">\n</div>"
    },
    {
      "title": "States",
      "description": null,
      "html": "<div class=\"mn-stack\" style=\"max-width:22rem\">\n  <input class=\"mn-input\" value=\"Disabled\" disabled aria-label=\"Disabled\">\n  <input class=\"mn-input\" value=\"Read only\" readonly aria-label=\"Read only\">\n  <input class=\"mn-input\" value=\"Invalid\" aria-invalid=\"true\" aria-label=\"Invalid\">\n</div>"
    }
  ],
  "css": ".mn-input, .mn-textarea, .mn-select {\n  --_h: var(--mn-size-md);\n  display: block; width: 100%; min-width: 0;\n  height: var(--_h);\n  padding: 0 .75rem;\n  border: var(--mn-border-w) solid var(--mn-input);\n  border-radius: var(--mn-radius-field);\n  background: var(--mn-surface);\n  color: var(--mn-fg);\n  font: 400 var(--mn-text-sm)/1.4 var(--mn-font);\n  box-shadow: var(--mn-shadow-sm);\n  transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease);\n  appearance: none; -webkit-appearance: none;\n}\n.mn-input::placeholder, .mn-textarea::placeholder { color: var(--mn-muted); opacity: .85; }\n.mn-input:hover, .mn-textarea:hover, .mn-select:hover { border-color: color-mix(in oklab, var(--mn-input), var(--mn-fg) 20%); }\n.mn-input:focus, .mn-textarea:focus, .mn-select:focus { outline: none; border-color: var(--mn-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 25%, transparent); }\n.mn-input:disabled, .mn-textarea:disabled, .mn-select:disabled { opacity: .55; cursor: not-allowed; background: var(--mn-surface-2); }\n.mn-input[aria-invalid=\"true\"], .mn-textarea[aria-invalid=\"true\"], .mn-select[aria-invalid=\"true\"] { border-color: var(--mn-danger); }\n.mn-input[aria-invalid=\"true\"]:focus, .mn-textarea[aria-invalid=\"true\"]:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-danger) 22%, transparent); }\n.mn-input-sm, .mn-select.mn-input-sm { --_h: var(--mn-size-sm); padding: 0 .6rem; font-size: calc(var(--mn-text-sm) - 1px); }\n.mn-input-lg, .mn-select.mn-input-lg { --_h: var(--mn-size-lg); padding: 0 1rem; font-size: calc(var(--mn-text-sm) + 1px); }\n.mn-input[type=\"date\"], .mn-input[type=\"time\"], .mn-input[type=\"datetime-local\"] { padding-inline-end: .5rem; }\n.mn-input[type=\"color\"] { padding: 3px; width: var(--_h); cursor: pointer; }\n.mn-input::-webkit-search-cancel-button { -webkit-appearance: none; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/input.json"
  }
}