{
  "id": "uilib/components/radio",
  "name": "Radio",
  "description": "The Radio component is shown as a circle that is filled (checked) when activated.",
  "group": "components",
  "slug": "/uilib/components/radio/",
  "props": [
    {
      "name": "value",
      "doc": "defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the **RadioGroup**.",
      "type": "string",
      "status": "required",
      "defaultValue": null
    },
    {
      "name": "name",
      "doc": "custom grouping name. Defaults to a random name.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "layout_direction",
      "doc": "Define the layout direction of the Radio buttons. Can be either `column` or `row`. Defaults to `column`.",
      "type": [
        "column",
        "row"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "size",
      "doc": "the size of the Radio button. For now there is **medium** (default) and **large**.",
      "type": [
        "medium",
        "large"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status",
      "doc": "text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.",
      "type": [
        "error",
        "info",
        "boolean"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status_state",
      "doc": "defines the state of the status. It's two statuses `[error, info]`. Defaults to `error`.",
      "type": [
        "error",
        "info"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status_props",
      "doc": "use an object to define additional FormStatus properties.",
      "type": "Various",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "globalStatus",
      "doc": "the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).",
      "type": "Various",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "label",
      "doc": "use either the `label` property or provide a custom one.",
      "type": "React.ReactNode",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "label_direction",
      "doc": "to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.",
      "type": [
        "vertical",
        "horizontal"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "label_sr_only",
      "doc": "use `true` to make the label only readable by screen readers.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "vertical",
      "doc": "will force both `direction` and `label_direction` to be **vertical** if set to `true`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "checked",
      "doc": "determine whether the radio is checked or not. Default will be `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "group",
      "doc": "use a unique group identifier to define the Radio buttons that belongs together.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "label_position",
      "doc": "defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.",
      "type": [
        "left",
        "right"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "innerRef",
      "doc": "by providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.",
      "type": "React.RefObject",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "events": [
    {
      "name": "on_change",
      "doc": "will be called once a Radio button changes the state. Returns an object `{ value, event }`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "related": [],
  "checksum": "b61ecb01dcd20e6518d57d3b449dd90d7af8d70be48b23e09883eade8a536df2",
  "source": {
    "repo": "https://github.com/dnbexperience/eufemia",
    "file": "packages/dnb-eufemia/src/components/radio/Radio.js",
    "permalink": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/radio/Radio.js"
  },
  "sources": {
    "entry": {
      "local": "src/docs/uilib/components/radio.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/radio/"
    },
    "props": {
      "local": "src/docs/uilib/components/radio/properties.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/radio/properties/"
    },
    "events": {
      "local": "src/docs/uilib/components/radio/events.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/radio/events/"
    },
    "demos": {
      "local": "src/docs/uilib/components/radio/demos.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/radio/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2025-12-18T10:04:00.106Z",
  "schemaVersion": 1
}