> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Radio

> Radio buttons for mutually exclusive choices.

export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
  const hostRef = React.useRef(null);
  const handleRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const [previewWidth, setPreviewWidth] = React.useState(null);
  const [isDragging, setIsDragging] = React.useState(false);
  const [playgroundHref, setPlaygroundHref] = React.useState(null);
  React.useEffect(function () {
    if (!playground) return;
    var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
    var path = isLocal ? "/playground" : "/docs/playground";
    var url = new URL(path, window.location.href);
    url.hash = "code=" + playground;
    setPlaygroundHref(url.href);
  }, [playground]);
  var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
  React.useEffect(function () {
    if (cardRef.current) {
      var card = cardRef.current.closest(".group");
      if (card) card.classList.remove("group");
    }
    var host = hostRef.current;
    if (!host || !json) return;
    function mount() {
      if (!window.__prefab || !host) return;
      var dark = document.documentElement.classList.contains("dark");
      handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
        dark: dark
      });
      if (bare && host.shadowRoot) {
        var m = host.shadowRoot.querySelector("[data-prefab-mount]");
        if (m) m.style.background = "transparent";
      }
    }
    if (window.__prefab) {
      mount();
    } else {
      if (!window.__prefabLoading) {
        if (!window.__prefabReady) {
          var s = document.createElement("script");
          s.src = "/renderer.js";
          document.head.appendChild(s);
        }
        window.__prefabLoading = new Promise(function (resolve) {
          function check() {
            if (window.__prefabReady) {
              window.__prefabReady.then(resolve);
            } else {
              setTimeout(check, 10);
            }
          }
          check();
        });
      }
      window.__prefabLoading.then(mount);
    }
    var observer = new MutationObserver(function () {
      var dark = document.documentElement.classList.contains("dark");
      if (handleRef.current) handleRef.current.setDark(dark);
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return function () {
      observer.disconnect();
      if (handleRef.current) {
        handleRef.current.unmount();
        handleRef.current = null;
      }
    };
  }, [json]);
  function startResize(e) {
    e.preventDefault();
    var startX = e.clientX;
    var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
    var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
    setIsDragging(true);
    function onMove(ev) {
      var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
      setPreviewWidth(w);
    }
    function onUp() {
      document.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseup", onUp);
      setIsDragging(false);
    }
    document.addEventListener("mousemove", onMove);
    document.addEventListener("mouseup", onUp);
  }
  if (bare) {
    return <div ref={hostRef} />;
  }
  if (resizable) {
    return <Card>
        <div ref={cardRef} />
        <div ref={containerRef} style={{
      display: "flex",
      position: "relative",
      overflow: "hidden"
    }}>
          <div ref={hostRef} style={{
      flex: previewWidth ? "none" : 1,
      width: previewWidth ? previewWidth + "px" : undefined,
      minWidth: 0
    }} />
          <div onMouseDown={startResize} style={{
      width: "14px",
      flexShrink: 0,
      cursor: "col-resize",
      background: isDragging ? "var(--border, #e5e7eb)" : "color-mix(in srgb, var(--border, #e5e7eb) 40%, transparent)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      transition: "background 0.15s",
      userSelect: "none"
    }}>
            <svg width="6" height="24" style={{
      opacity: 0.5
    }}>
              <circle cx="2" cy="4" r="1.2" fill="currentColor" />
              <circle cx="2" cy="9" r="1.2" fill="currentColor" />
              <circle cx="2" cy="14" r="1.2" fill="currentColor" />
              <circle cx="2" cy="19" r="1.2" fill="currentColor" />
              <circle cx="5" cy="4" r="1.2" fill="currentColor" />
              <circle cx="5" cy="9" r="1.2" fill="currentColor" />
              <circle cx="5" cy="14" r="1.2" fill="currentColor" />
              <circle cx="5" cy="19" r="1.2" fill="currentColor" />
            </svg>
          </div>
          <div style={{
      flex: previewWidth ? 1 : "0 0 24px",
      minWidth: "24px",
      background: "repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--border, #e5e7eb) 3px, var(--border, #e5e7eb) 4px)",
      opacity: 0.4
    }} />
          {previewWidth && <div style={{
      position: "absolute",
      bottom: "8px",
      right: "8px",
      background: "var(--background, white)",
      border: "1px solid var(--border, #e5e7eb)",
      borderRadius: "4px",
      padding: "1px 6px",
      fontSize: "11px",
      fontFamily: "monospace",
      color: "var(--muted-foreground, #6b7280)",
      pointerEvents: "none"
    }}>
              {previewWidth}px
            </div>}
        </div>
        {playgroundHref && <div style={{
      display: "flex",
      justifyContent: "flex-end",
      padding: "4px 0 8px"
    }}>
            <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
      fontSize: "11px",
      opacity: 0.4,
      textDecoration: "none",
      textDecorationLine: "none",
      borderBottom: "none",
      boxShadow: "none",
      display: "inline-flex",
      alignItems: "center",
      gap: "3px",
      transition: "opacity 0.15s",
      fontWeight: 400
    }} onMouseOver={function (e) {
      e.currentTarget.style.opacity = "0.6";
    }} onMouseOut={function (e) {
      e.currentTarget.style.opacity = "0.4";
    }}>
              Edit in Playground
              <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
            </a>
          </div>}
        <div style={{
      marginBottom: "-2rem"
    }}>{children}</div>
      </Card>;
  }
  return <Card>
      <div ref={cardRef} />
      <div ref={hostRef} />
      {playgroundHref && <div style={{
    display: "flex",
    justifyContent: "flex-end",
    padding: "4px 0 8px"
  }}>
          <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
    fontSize: "11px",
    opacity: 0.4,
    textDecoration: "none",
    textDecorationLine: "none",
    borderBottom: "none",
    boxShadow: "none",
    display: "inline-flex",
    alignItems: "center",
    gap: "3px",
    transition: "opacity 0.15s",
    fontWeight: 400
  }} onMouseOver={function (e) {
    e.currentTarget.style.opacity = "0.6";
  }} onMouseOut={function (e) {
    e.currentTarget.style.opacity = "0.4";
  }}>
            Edit in Playground
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
          </a>
        </div>}
      <div style={{
    marginBottom: "-2rem"
  }}>{children}</div>
    </Card>;
};

Radio buttons let users select exactly one option from a set. Each `Radio` represents a single choice; wrap them in a `RadioGroup` to link them together and track the selected value.

## Basic Usage

A `RadioGroup` is a container that holds `Radio` children. Each radio needs an `option` (what gets stored when selected) and a `label` (what the user sees). The group tracks which radio is selected and stores its `option` string in state:

<ComponentPreview json={{"view":{"cssClass":"w-fit mx-auto","name":"radiogroup_1","type":"RadioGroup","children":[{"name":"radio_1","value":false,"type":"Radio","option":"sm","label":"Small","disabled":false,"required":false},{"name":"radio_2","value":false,"type":"Radio","option":"md","label":"Medium","disabled":false,"required":false},{"name":"radio_3","value":false,"type":"Radio","option":"lg","label":"Large","disabled":false,"required":false}]},"state":{"radio_1":false,"radio_2":false,"radio_3":false}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgUmFkaW8sIFJhZGlvR3JvdXAKCndpdGggUmFkaW9Hcm91cChjc3NfY2xhc3M9InctZml0IG14LWF1dG8iKToKICAgIFJhZGlvKG9wdGlvbj0ic20iLCBsYWJlbD0iU21hbGwiKQogICAgUmFkaW8ob3B0aW9uPSJtZCIsIGxhYmVsPSJNZWRpdW0iKQogICAgUmFkaW8ob3B0aW9uPSJsZyIsIGxhYmVsPSJMYXJnZSIpCg">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Radio, RadioGroup

    with RadioGroup(css_class="w-fit mx-auto"):
        Radio(option="sm", label="Small")
        Radio(option="md", label="Medium")
        Radio(option="lg", label="Large")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-fit mx-auto",
        "name": "radiogroup_1",
        "type": "RadioGroup",
        "children": [
          {
            "name": "radio_1",
            "value": false,
            "type": "Radio",
            "option": "sm",
            "label": "Small",
            "disabled": false,
            "required": false
          },
          {
            "name": "radio_2",
            "value": false,
            "type": "Radio",
            "option": "md",
            "label": "Medium",
            "disabled": false,
            "required": false
          },
          {
            "name": "radio_3",
            "value": false,
            "type": "Radio",
            "option": "lg",
            "label": "Large",
            "disabled": false,
            "required": false
          }
        ]
      },
      "state": {"radio_1": false, "radio_2": false, "radio_3": false}
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Pre-selected Option

Set `value=True` on a radio to have it selected when the component first renders:

<ComponentPreview json={{"view":{"cssClass":"w-fit mx-auto","name":"radiogroup_2","type":"RadioGroup","children":[{"name":"radio_4","value":false,"type":"Radio","option":"sm","label":"Small","disabled":false,"required":false},{"name":"radio_5","value":true,"type":"Radio","option":"md","label":"Medium","disabled":false,"required":false},{"name":"radio_6","value":false,"type":"Radio","option":"lg","label":"Large","disabled":false,"required":false}]},"state":{"radio_4":false,"radio_5":true,"radio_6":false}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgUmFkaW8sIFJhZGlvR3JvdXAKCndpdGggUmFkaW9Hcm91cChjc3NfY2xhc3M9InctZml0IG14LWF1dG8iKToKICAgIFJhZGlvKG9wdGlvbj0ic20iLCBsYWJlbD0iU21hbGwiKQogICAgUmFkaW8ob3B0aW9uPSJtZCIsIGxhYmVsPSJNZWRpdW0iLCB2YWx1ZT1UcnVlKQogICAgUmFkaW8ob3B0aW9uPSJsZyIsIGxhYmVsPSJMYXJnZSIpCg">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Radio, RadioGroup

    with RadioGroup(css_class="w-fit mx-auto"):
        Radio(option="sm", label="Small")
        Radio(option="md", label="Medium", value=True)
        Radio(option="lg", label="Large")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-fit mx-auto",
        "name": "radiogroup_2",
        "type": "RadioGroup",
        "children": [
          {
            "name": "radio_4",
            "value": false,
            "type": "Radio",
            "option": "sm",
            "label": "Small",
            "disabled": false,
            "required": false
          },
          {
            "name": "radio_5",
            "value": true,
            "type": "Radio",
            "option": "md",
            "label": "Medium",
            "disabled": false,
            "required": false
          },
          {
            "name": "radio_6",
            "value": false,
            "type": "Radio",
            "option": "lg",
            "label": "Large",
            "disabled": false,
            "required": false
          }
        ]
      },
      "state": {"radio_4": false, "radio_5": true, "radio_6": false}
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Disabled Options

Individual radios can be disabled while the rest of the group remains interactive. This is useful for options that exist but aren't currently available:

<ComponentPreview json={{"view":{"cssClass":"w-fit mx-auto","name":"radiogroup_3","type":"RadioGroup","children":[{"name":"radio_7","value":true,"type":"Radio","option":"free","label":"Free","disabled":false,"required":false},{"name":"radio_8","value":false,"type":"Radio","option":"pro","label":"Pro","disabled":false,"required":false},{"name":"radio_9","value":false,"type":"Radio","option":"enterprise","label":"Enterprise","disabled":true,"required":false}]},"state":{"radio_7":true,"radio_8":false,"radio_9":false}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgUmFkaW8sIFJhZGlvR3JvdXAKCndpdGggUmFkaW9Hcm91cChjc3NfY2xhc3M9InctZml0IG14LWF1dG8iKToKICAgIFJhZGlvKG9wdGlvbj0iZnJlZSIsIGxhYmVsPSJGcmVlIiwgdmFsdWU9VHJ1ZSkKICAgIFJhZGlvKG9wdGlvbj0icHJvIiwgbGFiZWw9IlBybyIpCiAgICBSYWRpbyhvcHRpb249ImVudGVycHJpc2UiLCBsYWJlbD0iRW50ZXJwcmlzZSIsIGRpc2FibGVkPVRydWUpCg">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Radio, RadioGroup

    with RadioGroup(css_class="w-fit mx-auto"):
        Radio(option="free", label="Free", value=True)
        Radio(option="pro", label="Pro")
        Radio(option="enterprise", label="Enterprise", disabled=True)
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-fit mx-auto",
        "name": "radiogroup_3",
        "type": "RadioGroup",
        "children": [
          {
            "name": "radio_7",
            "value": true,
            "type": "Radio",
            "option": "free",
            "label": "Free",
            "disabled": false,
            "required": false
          },
          {
            "name": "radio_8",
            "value": false,
            "type": "Radio",
            "option": "pro",
            "label": "Pro",
            "disabled": false,
            "required": false
          },
          {
            "name": "radio_9",
            "value": false,
            "type": "Radio",
            "option": "enterprise",
            "label": "Enterprise",
            "disabled": true,
            "required": false
          }
        ]
      },
      "state": {"radio_7": true, "radio_8": false, "radio_9": false}
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Reading the Value

Use `.rx` on the `RadioGroup` to get a reactive reference to the selected radio's `option` string. When the user clicks a different option, anything bound to `.rx` updates automatically:

<ComponentPreview json={{"view":{"cssClass":"gap-4 w-fit mx-auto","type":"Column","children":[{"name":"radiogroup_4","type":"RadioGroup","children":[{"name":"radio_10","value":false,"type":"Radio","option":"heart-of-gold","label":"Heart of Gold","disabled":false,"required":false},{"name":"radio_11","value":false,"type":"Radio","option":"bistromath","label":"Bistromath","disabled":false,"required":false},{"name":"radio_12","value":false,"type":"Radio","option":"vogon-cruiser","label":"Vogon Constructor Fleet","disabled":false,"required":false}]},{"content":"Selected ship: {{ radiogroup_4 }}","type":"Text"}]},"state":{"radio_10":false,"radio_11":false,"radio_12":false}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBSYWRpbywgUmFkaW9Hcm91cCwgVGV4dAoKd2l0aCBDb2x1bW4oZ2FwPTQsIGNzc19jbGFzcz0idy1maXQgbXgtYXV0byIpOgogICAgd2l0aCBSYWRpb0dyb3VwKCkgYXMgZ3JvdXA6CiAgICAgICAgUmFkaW8ob3B0aW9uPSJoZWFydC1vZi1nb2xkIiwgbGFiZWw9IkhlYXJ0IG9mIEdvbGQiKQogICAgICAgIFJhZGlvKG9wdGlvbj0iYmlzdHJvbWF0aCIsIGxhYmVsPSJCaXN0cm9tYXRoIikKICAgICAgICBSYWRpbyhvcHRpb249InZvZ29uLWNydWlzZXIiLCBsYWJlbD0iVm9nb24gQ29uc3RydWN0b3IgRmxlZXQiKQogICAgVGV4dChmIlNlbGVjdGVkIHNoaXA6IHtncm91cC5yeH0iKQo">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Column, Radio, RadioGroup, Text

    with Column(gap=4, css_class="w-fit mx-auto"):
        with RadioGroup() as group:
            Radio(option="heart-of-gold", label="Heart of Gold")
            Radio(option="bistromath", label="Bistromath")
            Radio(option="vogon-cruiser", label="Vogon Constructor Fleet")
        Text(f"Selected ship: {group.rx}")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-4 w-fit mx-auto",
        "type": "Column",
        "children": [
          {
            "name": "radiogroup_4",
            "type": "RadioGroup",
            "children": [
              {
                "name": "radio_10",
                "value": false,
                "type": "Radio",
                "option": "heart-of-gold",
                "label": "Heart of Gold",
                "disabled": false,
                "required": false
              },
              {
                "name": "radio_11",
                "value": false,
                "type": "Radio",
                "option": "bistromath",
                "label": "Bistromath",
                "disabled": false,
                "required": false
              },
              {
                "name": "radio_12",
                "value": false,
                "type": "Radio",
                "option": "vogon-cruiser",
                "label": "Vogon Constructor Fleet",
                "disabled": false,
                "required": false
              }
            ]
          },
          {"content": "Selected ship: {{ radiogroup_4 }}", "type": "Text"}
        ]
      },
      "state": {"radio_10": false, "radio_11": false, "radio_12": false}
    }
    ```
  </CodeGroup>
</ComponentPreview>

Click a radio and the text updates instantly. The `.rx` reference holds the `option` string — `"heart-of-gold"`, `"bistromath"`, etc. — not the label.

## Actions

The `on_change` parameter on `RadioGroup` fires actions when the selection changes. Inside the action, `$event` holds the newly selected `option` string:

<ComponentPreview json={{"view":{"cssClass":"gap-4 w-fit mx-auto","type":"Column","children":[{"name":"radiogroup_5","type":"RadioGroup","onChange":{"action":"setState","key":"choice","value":"You picked: {{ $event }}"},"children":[{"name":"radio_13","value":false,"type":"Radio","option":"light","label":"Light","disabled":false,"required":false},{"name":"radio_14","value":false,"type":"Radio","option":"dark","label":"Dark","disabled":false,"required":false},{"name":"radio_15","value":true,"type":"Radio","option":"system","label":"System","disabled":false,"required":false}]},{"cssClass":"text-muted-foreground","content":"{{ choice | default:'Make a selection' }}","type":"Text"}]},"state":{"radio_13":false,"radio_14":false,"radio_15":true}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQ29sdW1uLCBSYWRpbywgUmFkaW9Hcm91cCwgVGV4dApmcm9tIHByZWZhYl91aS5hY3Rpb25zIGltcG9ydCBTZXRTdGF0ZQoKd2l0aCBDb2x1bW4oZ2FwPTQsIGNzc19jbGFzcz0idy1maXQgbXgtYXV0byIpOgogICAgd2l0aCBSYWRpb0dyb3VwKAogICAgICAgIG9uX2NoYW5nZT1TZXRTdGF0ZSgiY2hvaWNlIiwgIllvdSBwaWNrZWQ6IHt7ICRldmVudCB9fSIpLAogICAgKToKICAgICAgICBSYWRpbyhvcHRpb249ImxpZ2h0IiwgbGFiZWw9IkxpZ2h0IikKICAgICAgICBSYWRpbyhvcHRpb249ImRhcmsiLCBsYWJlbD0iRGFyayIpCiAgICAgICAgUmFkaW8ob3B0aW9uPSJzeXN0ZW0iLCBsYWJlbD0iU3lzdGVtIiwgdmFsdWU9VHJ1ZSkKICAgIFRleHQoCiAgICAgICAgInt7IGNob2ljZSB8IGRlZmF1bHQ6J01ha2UgYSBzZWxlY3Rpb24nIH19IiwKICAgICAgICBjc3NfY2xhc3M9InRleHQtbXV0ZWQtZm9yZWdyb3VuZCIsCiAgICApCg">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Column, Radio, RadioGroup, Text
    from prefab_ui.actions import SetState

    with Column(gap=4, css_class="w-fit mx-auto"):
        with RadioGroup(
            on_change=SetState("choice", "You picked: {{ $event }}"),
        ):
            Radio(option="light", label="Light")
            Radio(option="dark", label="Dark")
            Radio(option="system", label="System", value=True)
        Text(
            "{{ choice | default:'Make a selection' }}",
            css_class="text-muted-foreground",
        )
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-4 w-fit mx-auto",
        "type": "Column",
        "children": [
          {
            "name": "radiogroup_5",
            "type": "RadioGroup",
            "onChange": {"action": "setState", "key": "choice", "value": "You picked: {{ $event }}"},
            "children": [
              {
                "name": "radio_13",
                "value": false,
                "type": "Radio",
                "option": "light",
                "label": "Light",
                "disabled": false,
                "required": false
              },
              {
                "name": "radio_14",
                "value": false,
                "type": "Radio",
                "option": "dark",
                "label": "Dark",
                "disabled": false,
                "required": false
              },
              {
                "name": "radio_15",
                "value": true,
                "type": "Radio",
                "option": "system",
                "label": "System",
                "disabled": false,
                "required": false
              }
            ]
          },
          {
            "cssClass": "text-muted-foreground",
            "content": "{{ choice | default:'Make a selection' }}",
            "type": "Text"
          }
        ]
      },
      "state": {"radio_13": false, "radio_14": false, "radio_15": true}
    }
    ```
  </CodeGroup>
</ComponentPreview>

For simple "show the current selection" cases, `.rx` is the better approach. Use `on_change` when you need to transform the value or trigger side effects.

## API Reference

<Card icon="code" title="RadioGroup Parameters">
  <ParamField body="name" type="str | None" default="None">
    State key for the selected value. Auto-generated if not provided.
  </ParamField>

  <ParamField body="on_change" type="Action | list[Action] | None" default="None">
    Action(s) to execute when the selection changes. `$event` is the `option` string of the selected radio.
  </ParamField>

  <ParamField body="css_class" type="str | None" default="None">
    Additional Tailwind CSS classes.
  </ParamField>
</Card>

<Card icon="code" title="Radio Parameters">
  <ParamField body="option" type="str" required>
    The option identifier stored in the group's state when this radio is selected. Defaults to the label.
  </ParamField>

  <ParamField body="label" type="str | None" default="None">
    Label text displayed next to the radio button.
  </ParamField>

  <ParamField body="value" type="bool" default="False">
    Whether this radio is initially selected.
  </ParamField>

  <ParamField body="disabled" type="bool" default="False">
    Whether this radio is non-interactive.
  </ParamField>

  <ParamField body="required" type="bool" default="False">
    Whether a selection is required for form submission.
  </ParamField>

  <ParamField body="css_class" type="str | None" default="None">
    Additional Tailwind CSS classes.
  </ParamField>
</Card>

## Protocol Reference

```json RadioGroup theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
  "type": "RadioGroup",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "name?": "string",
  "value?": "string",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
```

```json Radio theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
  "type": "Radio",
  "id?": "string",
  "onMount?": "any",
  "name?": "string",
  "value?": "boolean | string",
  "option": "string (required)",
  "label?": "string",
  "disabled?": false,
  "required?": false,
  "cssClass?": "string"
}
```

For the complete protocol schema, see [RadioGroup](/protocol/radio-group), [Radio](/protocol/radio).