{
  "name": "Radio",
  "source": "src/components/Radio.tsx",
  "propsType": "RadioProps",
  "import": "import { Radio } from 'ionbase-ui';",
  "status": "stable",
  "summary": "One option inside a RadioGroup. Meaningless on its own — the group owns the name and the selected value.",
  "useWhen": [
    "a child of RadioGroup"
  ],
  "useInstead": [
    {
      "when": "the user may pick more than one",
      "use": "Checkbox"
    },
    {
      "when": "there are more than about five options",
      "use": "Select",
      "why": "a long radio list costs vertical space no one reads"
    }
  ],
  "variants": {
    "size": {
      "sm": {
        "use": "dense forms"
      },
      "md": {
        "use": "the default"
      },
      "lg": {
        "use": "touch targets and prominent choices"
      }
    },
    "intent": {
      "brand": {
        "use": "the default"
      },
      "neutral": {
        "use": "a choice with no positive reading — sort order, display mode"
      },
      "danger": {
        "use": "selecting a destructive option"
      }
    }
  },
  "slots": {
    "children": {
      "accepts": "text",
      "note": "the option's visible label"
    }
  },
  "a11y": {
    "role": "radio",
    "guarantees": [
      "`name` and the selected value come from the group's context, so no Radio has to repeat them",
      "`isDisabled` falls back to the group's"
    ],
    "requires": [
      "a `value` unique within the group",
      "a text label in `children`"
    ]
  },
  "antiPatterns": [
    {
      "dont": "a Radio outside a RadioGroup",
      "why": "it has no name and no siblings, so it can be selected but never unselected"
    },
    {
      "dont": "wiring `checked`/`onChange` on each Radio",
      "why": "the group owns selection; per-option wiring is what the context exists to remove"
    },
    {
      "dont": "a group of one radio",
      "why": "a single radio cannot be cleared once chosen — that is a Checkbox"
    }
  ],
  "deprecated": [
    {
      "prop": "disabled",
      "replacement": "isDisabled"
    }
  ],
  "stylesheet": "src/styles/radio.css",
  "tokens": [
    "--border-disabled",
    "--border-error-strong",
    "--border-focus",
    "--border-inverse",
    "--border-primary-strong",
    "--border-stronger",
    "--border-width-default",
    "--border-width-thick",
    "--font-family-sans",
    "--icon-disabled",
    "--icon-on-color",
    "--ion-duration-base",
    "--ion-ease-out",
    "--ion-radio-border",
    "--ion-radio-dot",
    "--ion-radio-fill",
    "--ion-radio-font-size",
    "--ion-radio-gap",
    "--ion-radio-line-height",
    "--ion-radio-raised",
    "--ion-radio-size",
    "--ion-shadow-raised-flush-lg",
    "--ion-shadow-raised-flush-sm",
    "--ion-shadow-raised-flush-xs",
    "--radius-full",
    "--spacing-12",
    "--spacing-16",
    "--spacing-2",
    "--spacing-20",
    "--spacing-24",
    "--spacing-8",
    "--surface-default",
    "--surface-disabled",
    "--surface-error",
    "--surface-inverse",
    "--surface-primary",
    "--text-disabled",
    "--text-secondary",
    "--type-body",
    "--type-body-line-height",
    "--type-body-sm",
    "--type-body-sm-line-height"
  ],
  "props": {
    "value": {
      "type": "string",
      "required": true,
      "origin": "own"
    },
    "size": {
      "type": "RadioSize | undefined",
      "required": false,
      "origin": "own",
      "values": [
        "sm",
        "md",
        "lg"
      ]
    },
    "intent": {
      "type": "RadioIntent | undefined",
      "required": false,
      "origin": "own",
      "values": [
        "neutral",
        "danger",
        "brand"
      ]
    },
    "isDisabled": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "description": "Whether this radio is disabled. Falls back to the group's `isDisabled`."
    },
    "disabled": {
      "type": "boolean | undefined",
      "required": false,
      "origin": "own",
      "tags": {
        "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
      }
    },
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own"
    }
  },
  "propCounts": {
    "own": 6,
    "aria": 0,
    "dom": 303,
    "other": 0
  }
}