{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "select",
  "name": "Select",
  "category": "Forms",
  "description": "A styled native select. Keeps the platform picker on mobile and full keyboard support everywhere.",
  "tags": [
    "select",
    "dropdown",
    "picker",
    "options"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "dropdown select",
      "choose from list",
      "country select",
      "native select"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "combobox",
      "radio-card"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/select",
  "markdownUrl": "https://mian.ro/ai/components/select.md",
  "classes": [
    {
      "name": "mn-select",
      "description": "Styled native <select>."
    },
    {
      "name": "mn-input-sm · mn-input-lg",
      "description": "Sizes."
    }
  ],
  "accessibility": [
    "It is a real select: every assistive technology already knows how to use it. For search-as-you-type, use Combobox."
  ],
  "examples": [
    {
      "title": "Basic",
      "description": null,
      "html": "<div class=\"mn-field\" style=\"max-width:20rem\">\n  <label class=\"mn-label\" for=\"sel-1\">Country</label>\n  <select class=\"mn-select\" id=\"sel-1\">\n    <option>Romania</option><option>Japan</option><option>Vietnam</option><option>Malaysia</option>\n  </select>\n</div>"
    },
    {
      "title": "With groups",
      "description": null,
      "html": "<select class=\"mn-select\" style=\"max-width:20rem\" aria-label=\"Noodle\">\n  <optgroup label=\"Japan\"><option>Udon</option><option>Soba</option><option>Ramen</option></optgroup>\n  <optgroup label=\"Vietnam\"><option>Pho</option><option>Bún</option></optgroup>\n</select>"
    }
  ],
  "css": ".mn-select {\n  padding-inline-end: 2.25rem; cursor: pointer;\n  background-image:\n    linear-gradient(45deg, transparent 50%, var(--mn-muted) 50%),\n    linear-gradient(135deg, var(--mn-muted) 50%, transparent 50%);\n  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;\n  background-size: 5px 5px, 5px 5px;\n  background-repeat: no-repeat;\n}\n.mn-select.mn-input-sm, .mn-select.mn-input-lg { padding-inline-end: 2.1rem; }\n.mn-select.mn-input-sm { background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; }\n.mn-select[multiple] { height: auto; padding: .35rem; background-image: none; }\n.mn-select option { color: var(--mn-fg); background: var(--mn-surface); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/select.json"
  }
}