{
  "name": "select",
  "title": {
    "es": "Select",
    "en": "Select"
  },
  "summary": {
    "es": "El select del navegador con el aspecto del de coss ui.",
    "en": "The browser's select with coss ui's look."
  },
  "category": "forms",
  "status": "stable",
  "nivel": "primitivos",
  "updated": "2026-09-29",
  "license": "MIT",
  "page": "https://componentes-lovat.vercel.app/c/select/",
  "requires": [],
  "files": [
    {
      "type": "html",
      "url": "https://componentes-lovat.vercel.app/raw/select/select.html",
      "content": "<div class=\"c-select-field\">\n  <label class=\"c-select-label\" for=\"sel-framework\">Formato</label>\n  <span class=\"c-select\">\n    <select class=\"c-select__field\" id=\"sel-framework\" name=\"format\">\n      <option value=\"1:1\">Cuadrado · 1:1</option>\n      <option value=\"4:5\" selected>Póster · 4:5</option>\n      <option value=\"9:16\">Historia · 9:16</option>\n      <option value=\"16:9\">Pantalla · 16:9</option>\n    </select>\n    <svg class=\"c-select__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg>\n  </span>\n</div>\n<div class=\"c-select-field\">\n  <label class=\"c-select-label\" for=\"sel-country\">País</label>\n  <span class=\"c-select\">\n    <select class=\"c-select__field\" id=\"sel-country\" name=\"country\" required>\n      <option value=\"\" disabled selected>Elige un país</option>\n      <optgroup label=\"Sudamérica\"><option>Argentina</option><option>Chile</option><option>Colombia</option><option>Perú</option></optgroup>\n      <optgroup label=\"Centro y Norteamérica\"><option>Guatemala</option><option>México</option></optgroup>\n    </select>\n    <svg class=\"c-select__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg>\n  </span>\n</div>\n"
    },
    {
      "type": "css",
      "url": "https://componentes-lovat.vercel.app/raw/select/select.css",
      "content": "/* select · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n   Generado por tools/build_css.py desde select.tw.json. No editar a mano. Necesita tokens.css. */\n.c-select__icon{pointer-events:none;position:absolute}\n.c-select{position:relative}\n.c-select-field{display:flex}\n.c-select{display:inline-flex}\n.c-select-label{display:inline-flex}\n.c-select__icon{width:calc(var(--spacing)*4.5);height:calc(var(--spacing)*4.5)}\n.c-select__field option{min-height:calc(var(--spacing)*8)}\n.c-select{min-height:calc(var(--spacing)*9);width:100%}\n.c-select-field{width:100%;max-width:calc(var(--spacing)*72)}\n.c-select{min-width:calc(var(--spacing)*36)}\n.c-select__field option{cursor:default}\n.c-select-field{flex-direction:column}\n.c-select{align-items:center}\n.c-select-label{align-items:center}\n.c-select-field{align-items:flex-start}\n.c-select{justify-content:space-between;gap:calc(var(--spacing)*2)}\n.c-select-field{gap:calc(var(--spacing)*2)}\n.c-select-label{gap:calc(var(--spacing)*2)}\n.c-select__field option{gap:calc(var(--spacing)*2)}\n.c-select{border-radius:var(--radius)}\n.c-select__field option{border-radius:calc(var(--radius) - 4px)}\n.c-select{border-style:var(--tw-border-style);border-width:1px;border-color:var(--input);background-color:var(--background)}\n.c-select__field option{padding-block:calc(var(--spacing)*1);padding-inline-start:calc(var(--spacing)*2);padding-inline-end:calc(var(--spacing)*4)}\n.c-select{text-align:left;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}\n.c-select__field option{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}\n.c-select-label{font-size:var(--text-base);line-height:calc(var(--spacing)*4.5);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.c-select{color:var(--foreground)}\n.c-select-label{color:var(--foreground)}\n.c-select__icon{opacity:.8}\n.c-select{--tw-shadow-alpha:5%;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n@supports (color:lab(0% 0 0)){\n.c-select{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,lab(0% 0 0/.05))}\n}\n.c-select{--tw-ring-color:var(--ring)}\n@supports (color:color-mix(in lab, red, red)){\n.c-select{--tw-ring-color:color-mix(in oklab,var(--ring)24%,transparent)}\n}\n.c-select{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-outline-style:none;outline-style:none}\n.c-select__field option{--tw-outline-style:none;outline-style:none}\n.c-select{-webkit-user-select:none;user-select:none}\n.c-select:not(:is(.dark *)){background-clip:padding-box}\n.c-select:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);position:absolute;content:var(--tw-content);inset:calc(var(--spacing)*0);content:var(--tw-content);border-radius:calc(var(--radius-lg) - 1px)}\n.c-select:not(:has(>.c-select__field:disabled)):not(:has(>.c-select__field:focus-visible)):not([aria-invalid=true]):not([data-pressed]):before{content:var(--tw-content);--tw-shadow:0 1px var(--tw-shadow-color,#0000000a)}\n@supports (color:color-mix(in lab, red, red)){\n.c-select:not(:has(>.c-select__field:disabled)):not(:has(>.c-select__field:focus-visible)):not([aria-invalid=true]):not([data-pressed]):before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}\n}\n.c-select:not(:has(>.c-select__field:disabled)):not(:has(>.c-select__field:focus-visible)):not([aria-invalid=true]):not([data-pressed]):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n.c-select:has(>.c-select__field:focus-visible){border-color:var(--ring);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n.c-select[aria-invalid=true]{border-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-select[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive)36%,transparent)}\n}\n.c-select:has(>.c-select__field:focus-visible)[aria-invalid=true]{border-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-select:has(>.c-select__field:focus-visible)[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive)64%,transparent)}\n}\n.c-select:has(>.c-select__field:focus-visible)[aria-invalid=true]{--tw-ring-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-select:has(>.c-select__field:focus-visible)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)16%,transparent)}\n}\n.c-select:has(>.c-select__field:disabled){opacity:.64}\n.c-select__field option:disabled{opacity:.64}\n.c-select__field option:is(:hover,:focus-visible){background-color:var(--accent);color:var(--accent-foreground)}\n@media (min-width:40rem){\n.c-select__icon{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}\n.c-select__field option{min-height:calc(var(--spacing)*7)}\n.c-select{min-height:calc(var(--spacing)*8);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.c-select__field option{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.c-select-label{font-size:var(--text-sm);line-height:calc(var(--spacing)*4)}\n}\n.c-select:is(.dark *){background-color:var(--input)}\n@supports (color:color-mix(in lab, red, red)){\n.c-select:is(.dark *){background-color:color-mix(in oklab,var(--input)32%,transparent)}\n}\n.c-select:is(.dark *):not(:has(>.c-select__field:disabled)):not(:has(>.c-select__field:focus-visible)):not([aria-invalid=true]):not([data-pressed]):before{content:var(--tw-content);--tw-shadow:0 -1px var(--tw-shadow-color,#ffffff0f)}\n@supports (color:color-mix(in lab, red, red)){\n.c-select:is(.dark *):not(:has(>.c-select__field:disabled)):not(:has(>.c-select__field:focus-visible)):not([aria-invalid=true]):not([data-pressed]):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}\n}\n.c-select:is(.dark *):not(:has(>.c-select__field:disabled)):not(:has(>.c-select__field:focus-visible)):not([aria-invalid=true]):not([data-pressed]):before{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n.c-select:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-select:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)24%,transparent)}\n}\n.c-select:is(:has(>.c-select__field:disabled),:has(>.c-select__field:focus-visible),:has(>.c-select__field[aria-invalid=true]),[data-pressed]){--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}\n/* propio */\n.c-select__field{appearance:none;-webkit-appearance:none;width:100%;min-height:inherit;padding-inline:calc(var(--spacing)*3 - 1px) calc(var(--spacing)*9);background:transparent;border:0;border-radius:inherit;color:inherit;font:inherit;outline:none;cursor:pointer}\n.c-select__field:disabled{cursor:not-allowed}\n.c-select__field:invalid{color:color-mix(in oklab,var(--muted-foreground)72%,transparent)}\n.c-select__field option{color:var(--foreground);background:var(--popover)}\n@supports (appearance: base-select){\n .c-select__field,.c-select__field::picker(select){appearance:base-select}\n .c-select__field{display:flex;align-items:center}\n .c-select__field::picker-icon{display:none}\n .c-select__field::picker(select){margin-block:4px;padding:.25rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--popover);color:var(--popover-foreground);box-shadow:0 10px 15px -3px #0000000d,0 4px 6px -4px #0000000d;opacity:0;scale:.98;transition:opacity .15s,scale .15s,display .15s allow-discrete,overlay .15s allow-discrete}\n .c-select__field:open::picker(select){opacity:1;scale:1}\n @starting-style{.c-select__field:open::picker(select){opacity:0;scale:.98}}\n .c-select__field option{display:grid;grid-template-columns:1rem minmax(0,1fr);align-items:center}\n .c-select__field option::checkmark{content:\"✓\" / \"\";grid-column:1;font-size:.75rem}\n .c-select__field optgroup{padding:.375rem .5rem;font-size:var(--text-xs);font-weight:500;color:var(--muted-foreground)}\n}\n.c-select__icon{inset-inline-end:calc(var(--spacing)*3 - 1px)}\n"
    },
    {
      "type": "standalone",
      "url": "https://componentes-lovat.vercel.app/r/select.html"
    }
  ],
  "tokensFile": "https://componentes-lovat.vercel.app/tokens.css",
  "darkTheme": "add class 'dark' to <html>",
  "contexto": "ambos",
  "densidad": "media",
  "tono": "sobria",
  "states": [
    "rest",
    "hover",
    "focus",
    "open",
    "disabled"
  ],
  "use": {
    "es": [
      "Para elegir una opción entre 5 y 30."
    ],
    "en": [
      "To pick one of 5 to 30 options."
    ]
  },
  "avoid": {
    "es": [
      "Con 2 a 4 opciones: usa radios.",
      "Para acciones: usa un menú."
    ],
    "en": [
      "With 2 to 4 options: use radios.",
      "For actions: use a menu."
    ]
  },
  "a11y": {
    "roles": [
      "combobox",
      "listbox",
      "option"
    ],
    "keyboard": [
      {
        "keys": "Espacio / Enter",
        "es": "Abre la lista",
        "en": "Opens the list"
      },
      {
        "keys": "↑ / ↓",
        "es": "Cambia de opción",
        "en": "Changes option"
      },
      {
        "keys": "Letra / Letter",
        "es": "Salta a la opción",
        "en": "Jumps to the option"
      }
    ],
    "notes": {
      "es": [
        "Es el <select> nativo: teclado, lector y la rueda del móvil vienen del navegador.",
        "En Chrome 135+ la lista abierta también toma el estilo (appearance: base-select)."
      ],
      "en": [
        "It is the native <select>: keyboard, screen reader and mobile picker come from the browser.",
        "In Chrome 135+ the open list is styled too (appearance: base-select)."
      ]
    },
    "test": {
      "es": [
        "Enfoca «País» y escribe «p»: salta a Perú."
      ],
      "en": [
        "Focus “Country” and type “p”: it jumps to Perú."
      ]
    }
  },
  "issues": {
    "es": [
      "En Safari y Firefox la lista abierta es la del sistema."
    ],
    "en": [
      "Safari and Firefox show the system list when open."
    ]
  },
  "credits": [
    {
      "source": "coss ui (MIT) · select.tsx",
      "url": "https://coss.com/ui"
    },
    {
      "source": "Origin UI (MIT) · select-native.tsx",
      "url": "https://21st.dev/@originui"
    }
  ],
  "changes": [
    {
      "date": "2026-09-29",
      "es": "Diseño de coss ui en HTML, CSS y JS sin dependencias",
      "en": "coss ui design in dependency-free HTML, CSS and JS"
    }
  ],
  "partes": [],
  "pieza": "https://componentes-lovat.vercel.app/r/select.html"
}