{
  "tag": "ed-radio",
  "kind": "component",
  "summary": "One option of an ed-radio-group, with a label and optional description, used to select a single choice among\nseveral.",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/radio/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/radio/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon"
  ],
  "use": [
    "An option with an icon or extra content at its start or end, to tell similar options apart"
  ],
  "notFor": [
    {
      "when": "A single on/off setting",
      "instead": "a [Switch](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/switch) or a [Checkbox](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/checkbox)"
    },
    {
      "when": "A choice where several options can be selected",
      "instead": "a [Checkbox](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/checkbox) in a [Checkbox Group](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/checkbox-group)"
    }
  ],
  "rules": [],
  "api": {
    "attributes": [
      {
        "name": "value",
        "property": "value",
        "type": "string",
        "description": "The radio's value. When selected, the radio group will receive this value."
      },
      {
        "name": "appearance",
        "property": "appearance",
        "type": "'default' | 'button' | 'card'",
        "default": "'default'",
        "description": "The radio's visual appearance. Owned by the enclosing `ed-radio-group`, which writes it onto\nevery radio it holds — a value set on a single radio is overwritten on the group's next sync."
      },
      {
        "name": "error",
        "property": "error",
        "type": "null | string",
        "default": "null",
        "description": "Draws an error-style input with danger colored border and icon. Set to an empty string (or use the bare attribute `<ed-input error>`) to render error styling without a visible message; submission is still blocked with a localized fallback validation message. Set to a non-empty string to additionally display that message in the message area, above the hint, and use it as the validation message. Set to `null` (the default) or `undefined`, or remove the attribute, to clear the error."
      },
      {
        "name": "warning",
        "property": "warning",
        "type": "null | string",
        "default": "null",
        "description": "Draws a warning-style input with warning colored border and icon. Set to an empty string (or use the bare attribute `<ed-input warning>`) to render warning styling without a visible message. Set to a non-empty string to additionally display that message in the message area, above the hint. Warnings do not block form submission. Set to `null` (the default) or `undefined`, or remove the attribute, to clear the warning."
      },
      {
        "name": "ai",
        "property": "ai",
        "type": "boolean",
        "default": "false",
        "description": "Draws an ai-style input with AI colored border and icon. Suppressed visually once\n`hasInteracted` flips, but the property and attribute are preserved so the styling\nreturns after `formResetCallback` clears `hasInteracted`."
      },
      {
        "name": "hint",
        "property": "hint",
        "type": "string",
        "default": "''",
        "description": "The form control's hint text. If you need to display HTML, use the `hint` slot instead."
      },
      {
        "name": "name",
        "property": "name",
        "type": "null | string",
        "default": "null",
        "description": "The name of the input, submitted as a name/value pair with form data."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "description": "Disables the form control. HTML treats a control as disabled when either its own `disabled` is\nset or an ancestor `<fieldset>` is disabled, so reading this reports the combined state while\nwriting it sets only this element's own. Keeping the two apart is what lets a fieldset be\nre-enabled without clearing a disabled state the consumer set in the meantime."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [
      {
        "name": "form",
        "type": "HTMLFormElement | null",
        "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work."
      },
      {
        "name": "validationTarget",
        "type": "undefined | HTMLElement",
        "description": "Override this to change where constraint validation popups are anchored."
      }
    ],
    "methods": [
      {
        "name": "setCustomStates",
        "description": "A radio is also disabled when its group is, which the base class cannot see — it reads only\nthis element's own `disabled`. Without this override its unconditional write in\n`setCustomStates` lands after the one below and resets the state to `false`, so a radio in a\ndisabled group still answers hover and clicks: every hover and active rule keys off\n`:state(disabled)`."
      },
      {
        "name": "setCustomValidity",
        "parameters": [
          {
            "name": "message",
            "type": "string"
          }
        ],
        "description": "Do not use this when creating a \"Validator\". This is intended for end users of components.\nWe track manually defined custom errors so we don't clear them on accident in our validators."
      },
      {
        "name": "resetValidity",
        "description": "Reset validity is a way of removing manual custom errors and native validation."
      },
      {
        "name": "getPropertyDescriptor",
        "static": true,
        "parameters": [
          {
            "name": "name",
            "type": "PropertyKey"
          },
          {
            "name": "key",
            "type": "string | symbol"
          },
          {
            "name": "options",
            "type": "PropertyDeclaration"
          }
        ],
        "returns": "PropertyDescriptor | undefined",
        "description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n  default. That value is its field initializer's: the constructor has finished before markup,\n  a framework or any other code can set anything. Every later `null` or `undefined` means what\n  a dropped prop means on a native element — the attribute is removed: with the attribute\n  there, it is removed and Lit's `useDefault` restores the default without writing it; without\n  one, the property is set to the default. A value set and cleared again before the element\n  updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
      }
    ],
    "events": [
      {
        "name": "blur",
        "react": "onBlur",
        "description": "Emitted when the control loses focus."
      },
      {
        "name": "focus",
        "react": "onFocus",
        "description": "Emitted when the control gains focus."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The radio's label. With `appearance=\"card\"` it is the card's title, and it truncates rather than wraps."
      },
      {
        "name": "start",
        "description": "An element, such as `<ed-icon>`, placed before the label. Only rendered when `appearance` is `button`."
      },
      {
        "name": "end",
        "description": "An element, such as `<ed-icon>` or `<ed-badge>`, placed after the label. Only shown when `appearance` is `button` or `card`; with `card` it sits at the far end of the title row and holds the chips and the icon. Content without a role of its own joins the radio's accessible name — `<ed-badge>` carries `role=\"status\"` and is announced separately, a bare `<span>` is not. An `<ed-badge>` given an `aria-label` joins the name with it."
      },
      {
        "name": "description",
        "description": "Explanatory text below the title, indented to line up with it. Only shown when `appearance` is `card`. It becomes the radio's accessible description: the container is hidden from the accessibility tree and referenced with `aria-describedby`, so keep it to text. An interactive element placed here stays reachable by keyboard while being invisible to a screen reader — the combination axe reports as `aria-hidden-focus`."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-radio-checked-icon-color",
        "description": "The color of the checked icon."
      },
      {
        "name": "--ed-radio-checked-icon-scale",
        "description": "The size of the checked icon relative to the radio."
      }
    ],
    "parts": [
      {
        "name": "control",
        "description": "The circular container that wraps the radio's checked state."
      },
      {
        "name": "checked-icon",
        "description": "The checked icon."
      },
      {
        "name": "start",
        "description": "The container that wraps the `start` slot."
      },
      {
        "name": "label",
        "description": "The container that wraps the radio's label."
      },
      {
        "name": "end",
        "description": "The container that wraps the `end` slot."
      },
      {
        "name": "description",
        "description": "The container that wraps the `description` slot. Always present; hidden unless `appearance` is `card` and the slot has content."
      }
    ],
    "states": [
      {
        "name": "checked",
        "description": "Applied when the control is checked."
      },
      {
        "name": "disabled",
        "description": "Applied when the control is disabled."
      },
      {
        "name": "required",
        "description": "The control is required."
      },
      {
        "name": "optional",
        "description": "The control is not required."
      },
      {
        "name": "invalid",
        "description": "The value fails constraint validation, whether or not the user has touched the control yet."
      },
      {
        "name": "valid",
        "description": "The value passes constraint validation."
      },
      {
        "name": "user-invalid",
        "description": "Invalid, and the user has interacted with the control. This is the one to style for an error: it behaves like the platform's `:user-invalid`, so an untouched field is not marked wrong before the user has had a chance to fill it in."
      },
      {
        "name": "user-valid",
        "description": "Valid, and the user has interacted with the control."
      },
      {
        "name": "dirty",
        "description": "The user has interacted with the control."
      },
      {
        "name": "error",
        "description": "The `error` property is set, or the control is `user-invalid`."
      },
      {
        "name": "warning",
        "description": "The `warning` property is set."
      },
      {
        "name": "ai",
        "description": "The `ai` property is set and the user has not interacted with the control yet."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/radio/radio.js';",
  "react": {
    "component": "EdRadio",
    "import": "import EdRadio from '@eurodata/eurodata-ui/dist/react/radio/index.js';"
  }
}