{
  "name": "radio",
  "title": {
    "es": "Radio",
    "en": "Radio"
  },
  "summary": {
    "es": "Grupo de opciones excluyentes con el diseño de coss ui sobre radios nativos.",
    "en": "Mutually exclusive options with coss ui's design over native radios."
  },
  "category": "forms",
  "status": "stable",
  "nivel": "primitivos",
  "updated": "2026-09-29",
  "license": "MIT",
  "page": "https://componentes-lovat.vercel.app/c/radio/",
  "requires": [],
  "files": [
    {
      "type": "html",
      "url": "https://componentes-lovat.vercel.app/raw/radio/radio.html",
      "content": "<fieldset class=\"c-radio-group\">\n  <legend class=\"c-radio-group__legend\">Envío</legend>\n  <label class=\"c-radio-label c-radio-label--top\"><span class=\"c-radio\"><input class=\"c-radio__input\" type=\"radio\" name=\"ship\" value=\"std\" checked><span class=\"c-radio__indicator\"></span></span><span class=\"c-radio-label__text\">Estándar <span class=\"c-radio-label__description\">3 a 5 días · gratis</span></span></label>\n  <label class=\"c-radio-label c-radio-label--top\"><span class=\"c-radio\"><input class=\"c-radio__input\" type=\"radio\" name=\"ship\" value=\"exp\"><span class=\"c-radio__indicator\"></span></span><span class=\"c-radio-label__text\">Express <span class=\"c-radio-label__description\">24 horas · S/ 15</span></span></label>\n  <label class=\"c-radio-label c-radio-label--top\"><span class=\"c-radio\"><input class=\"c-radio__input\" type=\"radio\" name=\"ship\" value=\"int\" disabled><span class=\"c-radio__indicator\"></span></span><span class=\"c-radio-label__text\">Internacional <span class=\"c-radio-label__description\">No disponible</span></span></label>\n</fieldset>\n"
    },
    {
      "type": "css",
      "url": "https://componentes-lovat.vercel.app/raw/radio/radio.css",
      "content": "/* radio · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n   Generado por tools/build_css.py desde radio.tw.json. No editar a mano. Necesita tokens.css. */\n.c-radio__indicator{position:absolute}\n.c-radio{position:relative}\n.c-radio__indicator{inset:-1px}\n.c-radio-group__legend{margin-bottom:calc(var(--spacing)*1)}\n.c-radio-group{display:flex}\n.c-radio__indicator{display:flex}\n.c-radio{display:inline-flex}\n.c-radio-label{display:inline-flex}\n.c-radio{width:calc(var(--spacing)*4.5);height:calc(var(--spacing)*4.5)}\n.c-radio__indicator{width:calc(var(--spacing)*4.5);height:calc(var(--spacing)*4.5)}\n.c-radio{flex-shrink:0}\n.c-radio-group{flex-direction:column}\n.c-radio{align-items:center}\n.c-radio__indicator{align-items:center}\n.c-radio-label{align-items:center}\n.c-radio{justify-content:center}\n.c-radio__indicator{justify-content:center}\n.c-radio-label{gap:calc(var(--spacing)*2)}\n.c-radio-group{gap:calc(var(--spacing)*3)}\n.c-radio{border-radius:3.40282e38px}\n.c-radio__indicator{border-radius:3.40282e38px}\n.c-radio{border-style:var(--tw-border-style);border-width:1px;border-color:var(--input);background-color:var(--background)}\n.c-radio-group__legend{font-size:var(--text-base);line-height:calc(var(--spacing)*4.5)}\n.c-radio-label{font-size:var(--text-base);line-height:calc(var(--spacing)*4.5)}\n.c-radio-label__description{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}\n.c-radio-group__legend{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.c-radio-label{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.c-radio-label__description{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}\n.c-radio-group__legend{color:var(--foreground)}\n.c-radio-label{color:var(--foreground)}\n.c-radio-label__description{color:var(--muted-foreground)}\n.c-radio{--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-radio{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,lab(0% 0 0/.05))}\n}\n.c-radio{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-radio:not(:is(.dark *)){background-clip:padding-box}\n.c-radio:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);position:absolute;content:var(--tw-content);inset:calc(var(--spacing)*0)}\n.c-radio__indicator:before{content:var(--tw-content);width:calc(var(--spacing)*2);height:calc(var(--spacing)*2)}\n.c-radio:before{content:var(--tw-content);border-radius:3.40282e38px}\n.c-radio__indicator:before{content:var(--tw-content);border-radius:3.40282e38px;content:var(--tw-content);background-color:var(--primary-foreground)}\n.c-radio:not(:has(>.c-radio__input:disabled)):not(:has(>.c-radio__input:checked)):not([aria-invalid=true]):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-radio:not(:has(>.c-radio__input:disabled)):not(:has(>.c-radio__input:checked)):not([aria-invalid=true]):before{--tw-shadow:0 1px var(--tw-shadow-color,color-mix(in oklab,var(--color-black)4%,transparent))}\n}\n.c-radio:not(:has(>.c-radio__input:disabled)):not(:has(>.c-radio__input:checked)):not([aria-invalid=true]):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-radio:has(>.c-radio__input:focus-visible){--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + 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);--tw-ring-color:var(--ring);--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-offset-color:var(--background)}\n.c-radio[aria-invalid=true]{border-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-radio[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive)36%,transparent)}\n}\n.c-radio:has(>.c-radio__input:focus-visible)[aria-invalid=true]{border-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-radio:has(>.c-radio__input:focus-visible)[aria-invalid=true]{border-color:color-mix(in oklab,var(--destructive)64%,transparent)}\n}\n.c-radio:has(>.c-radio__input:focus-visible)[aria-invalid=true]{--tw-ring-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-radio:has(>.c-radio__input:focus-visible)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)48%,transparent)}\n}\n.c-radio__input:checked~.c-radio__indicator{background-color:var(--primary)}\n.c-radio:has(>.c-radio__input:disabled){cursor:not-allowed;opacity:.64}\n.c-radio__input:not(:checked)~.c-radio__indicator{display:none}\n@media (min-width:40rem){\n.c-radio{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}\n.c-radio__indicator{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}\n.c-radio-group__legend{font-size:var(--text-sm);line-height:calc(var(--spacing)*4)}\n.c-radio-label{font-size:var(--text-sm);line-height:calc(var(--spacing)*4)}\n.c-radio__indicator:before{content:var(--tw-content);width:calc(var(--spacing)*1.5);height:calc(var(--spacing)*1.5)}\n}\n.c-radio:is(.dark *):not(:has(>.c-radio__input:checked)){background-color:var(--input)}\n@supports (color:color-mix(in lab, red, red)){\n.c-radio:is(.dark *):not(:has(>.c-radio__input:checked)){background-color:color-mix(in oklab,var(--input)32%,transparent)}\n}\n.c-radio:is(.dark *):not(:has(>.c-radio__input:disabled)):not(:has(>.c-radio__input:checked)):not([aria-invalid=true]):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-radio:is(.dark *):not(:has(>.c-radio__input:disabled)):not(:has(>.c-radio__input:checked)):not([aria-invalid=true]):before{--tw-shadow:0 -1px var(--tw-shadow-color,color-mix(in oklab,var(--color-white)6%,transparent))}\n}\n.c-radio:is(.dark *):not(:has(>.c-radio__input:disabled)):not(:has(>.c-radio__input:checked)):not([aria-invalid=true]):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-radio:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-radio:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)24%,transparent)}\n}\n.c-radio:is(:has(>.c-radio__input:disabled),:has(>.c-radio__input:checked),:has(>.c-radio__input[aria-invalid=true])){--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-radio__input{position:absolute;inset:-1px;z-index:1;margin:0;opacity:0;cursor:pointer;appearance:none;border-radius:50%}\n.c-radio__input:disabled{cursor:not-allowed}\n.c-radio__indicator::before{content:\"\"}\n.c-radio-label{cursor:pointer}\n.c-radio-label:has(:disabled){cursor:not-allowed;opacity:.64}\n.c-radio-label--top{align-items:flex-start}\n.c-radio-label--top .c-radio{margin-top:1px}\n.c-radio-label__text{display:grid;gap:.25rem}\nfieldset.c-radio-group{border:0;margin:0;padding:0;min-width:0}\n.c-radio-group--row{flex-direction:row;flex-wrap:wrap;gap:1.25rem}\n"
    },
    {
      "type": "standalone",
      "url": "https://componentes-lovat.vercel.app/r/radio.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",
    "checked",
    "disabled"
  ],
  "use": {
    "es": [
      "Para 2 a 6 opciones visibles."
    ],
    "en": [
      "For 2 to 6 visible options."
    ]
  },
  "avoid": {
    "es": [
      "Si se pueden elegir varias: usa checkboxes."
    ],
    "en": [
      "If several can be chosen: use checkboxes."
    ]
  },
  "a11y": {
    "roles": [
      "radio",
      "radiogroup"
    ],
    "keyboard": [
      {
        "keys": "↑ / ↓",
        "es": "Elige la opción anterior o siguiente",
        "en": "Chooses the previous or next option"
      },
      {
        "keys": "Tab",
        "es": "Entra y sale del grupo",
        "en": "Enters and leaves the group"
      }
    ],
    "notes": {
      "es": [
        "Radios nativos con el mismo name: una sola parada de Tab y flechas sin JavaScript."
      ],
      "en": [
        "Native radios sharing a name: one Tab stop and arrow keys with no JavaScript."
      ]
    },
    "test": {
      "es": [
        "Tab entra en «Estándar»; ↓ elige «Express»."
      ],
      "en": [
        "Tab lands on “Standard”; ↓ chooses “Express”."
      ]
    }
  },
  "issues": {
    "es": [],
    "en": []
  },
  "credits": [
    {
      "source": "coss ui (MIT) · radio-group.tsx",
      "url": "https://coss.com/ui"
    },
    {
      "source": "W3C WAI-ARIA APG, Radio Group",
      "url": "https://www.w3.org/WAI/ARIA/apg/patterns/radio/"
    }
  ],
  "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/radio.html"
}