Radio

A radio button component for single selection from a group. Supports four appearances: radio (default circular indicator), button (Panel-powered with full emphasis and feedback), tab-horizontal (bottom-border accent), and tab-vertical (left-border accent).

Default

Astro Svelte React TODO

Preview

Option 1 Option 2 Disabled

---
import Radio from "../Radio.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column" })}>
  <Radio id="astro-def-1" name="astro-def" value="option1">Option 1</Radio>
  <Radio id="astro-def-2" name="astro-def" value="option2" checked
    >Option 2</Radio
  >
  <Radio id="astro-def-3" name="astro-def" value="option3" disabled
    >Disabled</Radio
  >
</div>

Option 1 Option 2 Disabled

<script lang="ts">
  import Radio from "../Radio.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let group = $state("option2");
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Radio id="svelte-def-1" value="option1" bind:group>Option 1</Radio>
  <Radio id="svelte-def-2" value="option2" bind:group>Option 2</Radio>
  <Radio id="svelte-def-3" value="option3" disabled>Disabled</Radio>
</div>

Appearance

All four appearance variants side by side.

Astro Svelte React TODO

Preview

---
import Radio from "../Radio.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>radio (default)</h3>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Radio id="astro-app-r1" name="astro-app-radio" value="r1" checked
        >Option 1</Radio
      >
      <Radio id="astro-app-r2" name="astro-app-radio" value="r2">Option 2</Radio
      >
    </div>
  </div>

  <div>
    <h3>button</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="astro-app-b1"
        name="astro-app-button"
        value="b1"
        appearance="button"
        checked
      >
        Option 1
      </Radio>
      <Radio
        id="astro-app-b2"
        name="astro-app-button"
        value="b2"
        appearance="button"
      >
        Option 2
      </Radio>
      <Radio
        id="astro-app-b3"
        name="astro-app-button"
        value="b3"
        appearance="button"
      >
        Option 3
      </Radio>
    </div>
  </div>

  <div>
    <h3>tab-horizontal</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="astro-app-th1"
        name="astro-app-tabh"
        value="th1"
        appearance="tab-horizontal"
        checked
      >
        Tab 1
      </Radio>
      <Radio
        id="astro-app-th2"
        name="astro-app-tabh"
        value="th2"
        appearance="tab-horizontal"
      >
        Tab 2
      </Radio>
      <Radio
        id="astro-app-th3"
        name="astro-app-tabh"
        value="th3"
        appearance="tab-horizontal"
      >
        Tab 3
      </Radio>
    </div>
  </div>

  <div>
    <h3>tab-vertical</h3>
    <div class={stack({ gap: "xs", direction: "column" })}>
      <Radio
        id="astro-app-tv1"
        name="astro-app-tabv"
        value="tv1"
        appearance="tab-vertical"
        checked
      >
        Dashboard
      </Radio>
      <Radio
        id="astro-app-tv2"
        name="astro-app-tabv"
        value="tv2"
        appearance="tab-vertical"
      >
        Settings
      </Radio>
    </div>
  </div>
</div>

<script lang="ts">
  import Radio from "../Radio.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let radioGroup = $state("app-r2");
  let buttonGroup = $state("app-b1");
  let tabHGroup = $state("app-th1");
  let tabVGroup = $state("app-tv1");
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>radio (default)</h3>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Radio id="svelte-app-r1" value="app-r1" bind:group={radioGroup}
        >Option 1</Radio
      >
      <Radio id="svelte-app-r2" value="app-r2" bind:group={radioGroup}
        >Option 2</Radio
      >
    </div>
  </div>

  <div>
    <h3>button</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="svelte-app-b1"
        value="app-b1"
        appearance="button"
        bind:group={buttonGroup}>Option 1</Radio
      >
      <Radio
        id="svelte-app-b2"
        value="app-b2"
        appearance="button"
        bind:group={buttonGroup}>Option 2</Radio
      >
      <Radio
        id="svelte-app-b3"
        value="app-b3"
        appearance="button"
        bind:group={buttonGroup}>Option 3</Radio
      >
    </div>
  </div>

  <div>
    <h3>tab-horizontal</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="svelte-app-th1"
        value="app-th1"
        appearance="tab-horizontal"
        bind:group={tabHGroup}
      >
        Tab 1
      </Radio>
      <Radio
        id="svelte-app-th2"
        value="app-th2"
        appearance="tab-horizontal"
        bind:group={tabHGroup}
      >
        Tab 2
      </Radio>
      <Radio
        id="svelte-app-th3"
        value="app-th3"
        appearance="tab-horizontal"
        bind:group={tabHGroup}
      >
        Tab 3
      </Radio>
    </div>
  </div>

  <div>
    <h3>tab-vertical</h3>
    <div class={stack({ gap: "xs", direction: "column" })}>
      <Radio
        id="svelte-app-tv1"
        value="app-tv1"
        appearance="tab-vertical"
        bind:group={tabVGroup}
      >
        Tab 1
      </Radio>
      <Radio
        id="svelte-app-tv2"
        value="app-tv2"
        appearance="tab-vertical"
        bind:group={tabVGroup}
      >
        Tab 2
      </Radio>
    </div>
  </div>
</div>

Size

Three sizes are available across all appearances.

Astro Svelte React TODO

Preview

---
import Radio from "../Radio.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>radio appearance</h3>
    <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
      <Radio id="astro-size-sm" name="astro-size" value="sm" size="sm" checked
        >Small</Radio
      >
      <Radio id="astro-size-md" name="astro-size" value="md" size="md"
        >Medium</Radio
      >
      <Radio id="astro-size-lg" name="astro-size" value="lg" size="lg"
        >Large</Radio
      >
    </div>
  </div>

  <div>
    <h3>button appearance</h3>
    <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
      <Radio
        id="astro-sbtn-sm"
        name="astro-sbtn"
        value="sm"
        appearance="button"
        size="sm"
        checked>Small</Radio
      >
      <Radio
        id="astro-sbtn-md"
        name="astro-sbtn"
        value="md"
        appearance="button"
        size="md">Medium</Radio
      >
      <Radio
        id="astro-sbtn-lg"
        name="astro-sbtn"
        value="lg"
        appearance="button"
        size="lg">Large</Radio
      >
    </div>
  </div>
</div>

<script lang="ts">
  import Radio from "../Radio.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let radioGroup = $state("svelte-size-sm");
  let buttonGroup = $state("svelte-sbtn-sm");
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>radio appearance</h3>
    <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
      <Radio
        id="svelte-size-sm"
        value="svelte-size-sm"
        size="sm"
        bind:group={radioGroup}>Small</Radio
      >
      <Radio
        id="svelte-size-md"
        value="svelte-size-md"
        size="md"
        bind:group={radioGroup}>Medium</Radio
      >
      <Radio
        id="svelte-size-lg"
        value="svelte-size-lg"
        size="lg"
        bind:group={radioGroup}>Large</Radio
      >
    </div>
  </div>

  <div>
    <h3>button appearance</h3>
    <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
      <Radio
        id="svelte-sbtn-sm"
        value="svelte-sbtn-sm"
        appearance="button"
        size="sm"
        bind:group={buttonGroup}>Small</Radio
      >
      <Radio
        id="svelte-sbtn-md"
        value="svelte-sbtn-md"
        appearance="button"
        size="md"
        bind:group={buttonGroup}>Medium</Radio
      >
      <Radio
        id="svelte-sbtn-lg"
        value="svelte-sbtn-lg"
        appearance="button"
        size="lg"
        bind:group={buttonGroup}>Large</Radio
      >
    </div>
  </div>
</div>

Button

appearance="button" composes with Panel — use emphasis (primary, secondary, ghost) and feedback (primary, success, danger, warning, neutral) to control the surface.

Astro Svelte React TODO

Preview

---
import Radio from "../Radio.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Primary (default)</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="astro-btn-p1"
        name="astro-btn-primary"
        value="p1"
        appearance="button"
        checked
      >
        Option 1
      </Radio>
      <Radio
        id="astro-btn-p2"
        name="astro-btn-primary"
        value="p2"
        appearance="button"
      >
        Option 2
      </Radio>
      <Radio
        id="astro-btn-p3"
        name="astro-btn-primary"
        value="p3"
        appearance="button"
      >
        Option 3
      </Radio>
    </div>
  </div>

  <div>
    <h3>Danger</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="astro-btn-d1"
        name="astro-btn-danger"
        value="d1"
        appearance="button"
        feedback="danger"
        checked
      >
        Option 1
      </Radio>
      <Radio
        id="astro-btn-d2"
        name="astro-btn-danger"
        value="d2"
        appearance="button"
        feedback="danger"
      >
        Option 2
      </Radio>
    </div>
  </div>

  <div>
    <h3>Warning</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="astro-btn-w1"
        name="astro-btn-warning"
        value="w1"
        appearance="button"
        feedback="warning"
        checked
      >
        Option 1
      </Radio>
      <Radio
        id="astro-btn-w2"
        name="astro-btn-warning"
        value="w2"
        appearance="button"
        feedback="warning"
      >
        Option 2
      </Radio>
    </div>
  </div>

  <div>
    <h3>Success</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="astro-btn-s1"
        name="astro-btn-success"
        value="s1"
        appearance="button"
        feedback="success"
        checked
      >
        Option 1
      </Radio>
      <Radio
        id="astro-btn-s2"
        name="astro-btn-success"
        value="s2"
        appearance="button"
        feedback="success"
      >
        Option 2
      </Radio>
    </div>
  </div>
</div>

<script lang="ts">
  import Radio from "../Radio.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let primaryGroup = $state("btn-p1");
  let dangerGroup = $state("btn-d1");
  let warningGroup = $state("btn-w1");
  let successGroup = $state("btn-s1");
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Primary (default)</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="svelte-btn-p1"
        value="btn-p1"
        appearance="button"
        bind:group={primaryGroup}
      >
        Option 1
      </Radio>
      <Radio
        id="svelte-btn-p2"
        value="btn-p2"
        appearance="button"
        bind:group={primaryGroup}
      >
        Option 2
      </Radio>
      <Radio
        id="svelte-btn-p3"
        value="btn-p3"
        appearance="button"
        bind:group={primaryGroup}
      >
        Option 3
      </Radio>
    </div>
  </div>

  <div>
    <h3>Danger</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="svelte-btn-d1"
        value="btn-d1"
        appearance="button"
        feedback="danger"
        bind:group={dangerGroup}
      >
        Option 1
      </Radio>
      <Radio
        id="svelte-btn-d2"
        value="btn-d2"
        appearance="button"
        feedback="danger"
        bind:group={dangerGroup}
      >
        Option 2
      </Radio>
    </div>
  </div>

  <div>
    <h3>Warning</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="svelte-btn-w1"
        value="btn-w1"
        appearance="button"
        feedback="warning"
        bind:group={warningGroup}
      >
        Option 1
      </Radio>
      <Radio
        id="svelte-btn-w2"
        value="btn-w2"
        appearance="button"
        feedback="warning"
        bind:group={warningGroup}
      >
        Option 2
      </Radio>
    </div>
  </div>

  <div>
    <h3>Success</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="svelte-btn-s1"
        value="btn-s1"
        appearance="button"
        feedback="success"
        bind:group={successGroup}
      >
        Option 1
      </Radio>
      <Radio
        id="svelte-btn-s2"
        value="btn-s2"
        appearance="button"
        feedback="success"
        bind:group={successGroup}
      >
        Option 2
      </Radio>
    </div>
  </div>
</div>

Tab

tab-horizontal and tab-vertical render a minimal accent-border indicator. Use feedback to change the accent color.

Astro Svelte React TODO

Preview

---
import Radio from "../Radio.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Tab Horizontal</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="astro-tab-h1"
        name="astro-tab-horiz"
        value="h1"
        appearance="tab-horizontal"
        checked
      >
        All
      </Radio>
      <Radio
        id="astro-tab-h2"
        name="astro-tab-horiz"
        value="h2"
        appearance="tab-horizontal"
      >
        Active
      </Radio>
      <Radio
        id="astro-tab-h3"
        name="astro-tab-horiz"
        value="h3"
        appearance="tab-horizontal"
      >
        Archived
      </Radio>
    </div>
  </div>

  <div>
    <h3>Tab Vertical</h3>
    <div class={stack({ gap: "xs", direction: "column" })}>
      <Radio
        id="astro-tab-v1"
        name="astro-tab-vert"
        value="v1"
        appearance="tab-vertical"
        checked
      >
        Dashboard
      </Radio>
      <Radio
        id="astro-tab-v2"
        name="astro-tab-vert"
        value="v2"
        appearance="tab-vertical"
      >
        Settings
      </Radio>
      <Radio
        id="astro-tab-v3"
        name="astro-tab-vert"
        value="v3"
        appearance="tab-vertical"
      >
        Profile
      </Radio>
    </div>
  </div>

  <div>
    <h3>Tab Horizontal — Danger feedback</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="astro-tab-hd1"
        name="astro-tab-danger"
        value="hd1"
        appearance="tab-horizontal"
        feedback="danger"
        checked
      >
        Errors
      </Radio>
      <Radio
        id="astro-tab-hd2"
        name="astro-tab-danger"
        value="hd2"
        appearance="tab-horizontal"
        feedback="danger"
      >
        Warnings
      </Radio>
    </div>
  </div>
</div>

<script lang="ts">
  import Radio from "../Radio.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let tabHGroup = $state("tab-h1");
  let tabVGroup = $state("tab-v1");
  let tabHDanger = $state("tab-hd1");
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Tab Horizontal</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="svelte-tab-h1"
        value="tab-h1"
        appearance="tab-horizontal"
        bind:group={tabHGroup}
      >
        All
      </Radio>
      <Radio
        id="svelte-tab-h2"
        value="tab-h2"
        appearance="tab-horizontal"
        bind:group={tabHGroup}
      >
        Active
      </Radio>
      <Radio
        id="svelte-tab-h3"
        value="tab-h3"
        appearance="tab-horizontal"
        bind:group={tabHGroup}
      >
        Archived
      </Radio>
    </div>
  </div>

  <div>
    <h3>Tab Vertical</h3>
    <div class={stack({ gap: "xs", direction: "column" })}>
      <Radio
        id="svelte-tab-v1"
        value="tab-v1"
        appearance="tab-vertical"
        bind:group={tabVGroup}
      >
        Dashboard
      </Radio>
      <Radio
        id="svelte-tab-v2"
        value="tab-v2"
        appearance="tab-vertical"
        bind:group={tabVGroup}
      >
        Settings
      </Radio>
      <Radio
        id="svelte-tab-v3"
        value="tab-v3"
        appearance="tab-vertical"
        bind:group={tabVGroup}
      >
        Profile
      </Radio>
    </div>
  </div>

  <div>
    <h3>Tab Horizontal — Danger feedback</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="svelte-tab-hd1"
        value="tab-hd1"
        appearance="tab-horizontal"
        feedback="danger"
        bind:group={tabHDanger}
      >
        Errors
      </Radio>
      <Radio
        id="svelte-tab-hd2"
        value="tab-hd2"
        appearance="tab-horizontal"
        feedback="danger"
        bind:group={tabHDanger}
      >
        Warnings
      </Radio>
    </div>
  </div>
</div>

With Badge

Badges inside radio components scale with the component’s size via fontSize: 1rem.

Astro Svelte React TODO

Preview

---
import Radio from "../Radio.astro";
import Badge from "@pindoba/astro-badge";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>radio appearance</h3>
    <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
      <Radio
        id="astro-badge-radio-sm"
        name="astro-badge-radio"
        value="sm"
        size="sm"
        checked
      >
        Small <Badge feedback="primary" size="sm">3</Badge>
      </Radio>
      <Radio
        id="astro-badge-radio-md"
        name="astro-badge-radio"
        value="md"
        size="md"
      >
        Medium <Badge feedback="primary" size="sm">3</Badge>
      </Radio>
      <Radio
        id="astro-badge-radio-lg"
        name="astro-badge-radio"
        value="lg"
        size="lg"
      >
        Large <Badge feedback="primary" size="sm">3</Badge>
      </Radio>
    </div>
  </div>

  <div>
    <h3>button appearance</h3>
    <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
      <Radio
        id="astro-badge-btn-sm"
        name="astro-badge-btn"
        value="sm"
        appearance="button"
        size="sm"
        checked
      >
        Small <Badge feedback="primary" size="sm">3</Badge>
      </Radio>
      <Radio
        id="astro-badge-btn-md"
        name="astro-badge-btn"
        value="md"
        appearance="button"
        size="md"
      >
        Medium <Badge feedback="primary" size="sm">3</Badge>
      </Radio>
      <Radio
        id="astro-badge-btn-lg"
        name="astro-badge-btn"
        value="lg"
        appearance="button"
        size="lg"
      >
        Large <Badge feedback="primary" size="sm">3</Badge>
      </Radio>
    </div>
  </div>
</div>

<script lang="ts">
  import Radio from "../Radio.svelte";
  import Badge from "@pindoba/svelte-badge";
  import { stack } from "@pindoba/styled-system/patterns";

  let radioGroup = $state("svelte-badge-radio-sm");
  let buttonGroup = $state("svelte-badge-btn-sm");
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>radio appearance</h3>
    <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
      <Radio
        id="svelte-badge-radio-sm"
        value="svelte-badge-radio-sm"
        size="sm"
        bind:group={radioGroup}
      >
        Small <Badge feedback="primary" size="sm">3</Badge>
      </Radio>
      <Radio
        id="svelte-badge-radio-md"
        value="svelte-badge-radio-md"
        size="md"
        bind:group={radioGroup}
      >
        Medium <Badge feedback="primary" size="sm">3</Badge>
      </Radio>
      <Radio
        id="svelte-badge-radio-lg"
        value="svelte-badge-radio-lg"
        size="lg"
        bind:group={radioGroup}
      >
        Large <Badge feedback="primary" size="sm">3</Badge>
      </Radio>
    </div>
  </div>

  <div>
    <h3>button appearance</h3>
    <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
      <Radio
        id="svelte-badge-btn-sm"
        value="svelte-badge-btn-sm"
        appearance="button"
        size="sm"
        bind:group={buttonGroup}
      >
        Small <Badge feedback="primary" size="sm">3</Badge>
      </Radio>
      <Radio
        id="svelte-badge-btn-md"
        value="svelte-badge-btn-md"
        appearance="button"
        size="md"
        bind:group={buttonGroup}
      >
        Medium <Badge feedback="primary" size="sm">3</Badge>
      </Radio>
      <Radio
        id="svelte-badge-btn-lg"
        value="svelte-badge-btn-lg"
        appearance="button"
        size="lg"
        bind:group={buttonGroup}
      >
        Large <Badge feedback="primary" size="sm">3</Badge>
      </Radio>
    </div>
  </div>
</div>

Custom Styling

The passThrough prop provides per-slot escape hatches: style accepts a Panda CSS SystemStyleObject merged with the base styles, and props forwards arbitrary HTML attributes onto the element.

Astro Svelte React TODO

Preview

Custom root style via passThrough

Extra padding

Custom input style via passThrough

Larger indicator

Custom props via passThrough

With data attributes

---
import Radio from "../Radio.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom root style via passThrough</h3>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Radio
        id="astro-cust-1"
        name="astro-cust"
        value="c1"
        passThrough={{
          root: {
            style: { gap: "lg", padding: "sm" },
          },
        }}
      >
        Extra padding
      </Radio>
    </div>
  </div>

  <div>
    <h3>Custom input style via passThrough</h3>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Radio
        id="astro-cust-2"
        name="astro-cust"
        value="c2"
        passThrough={{
          input: {
            style: { width: "2em", height: "2em" },
          },
        }}
      >
        Larger indicator
      </Radio>
    </div>
  </div>

  <div>
    <h3>Custom props via passThrough</h3>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Radio
        id="astro-cust-3"
        name="astro-cust"
        value="c3"
        passThrough={{
          root: {
            props: { "data-testid": "my-radio" },
          },
          input: {
            props: { "aria-label": "Custom radio button" },
          },
        }}
      >
        With data attributes
      </Radio>
    </div>
  </div>
</div>

Custom root style via passThrough

Extra padding

Custom input style via passThrough

Larger indicator

Custom props via passThrough

With data attributes

<script lang="ts">
  import Radio from "../Radio.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

  let group = $state("cust-c1");
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom root style via passThrough</h3>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Radio
        id="svelte-cust-1"
        value="cust-c1"
        bind:group
        passThrough={{
          root: {
            style: { gap: "lg", padding: "sm" },
          },
        }}
      >
        Extra padding
      </Radio>
    </div>
  </div>

  <div>
    <h3>Custom input style via passThrough</h3>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Radio
        id="svelte-cust-2"
        value="cust-c2"
        bind:group
        passThrough={{
          input: {
            style: { width: "2em", height: "2em" },
          },
        }}
      >
        Larger indicator
      </Radio>
    </div>
  </div>

  <div>
    <h3>Custom props via passThrough</h3>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Radio
        id="svelte-cust-3"
        value="cust-c3"
        bind:group
        passThrough={{
          root: {
            props: { "data-testid": "my-radio" },
          },
          input: {
            props: { "aria-label": "Custom radio button" },
          },
        }}
      >
        With data attributes
      </Radio>
    </div>
  </div>
</div>

Props

Prop
`appearance`	appearance Visual style of the radio. radio: Default circular indicator. button: Styled as a button using Panel composition. tab-horizontal: Bottom-border accent tab. tab-vertical: Left-border accent tab. Type "radio" \| "button" \| "tab-horizontal" \| "tab-vertical" Default "radio" Required No
`emphasis`	emphasis Emphasis level for button appearance. primary: Solid accent background. secondary: Surface background with border. ghost: Transparent background. Type "primary" \| "secondary" \| "ghost" Default "primary" Required No
`feedback`	feedback Color scheme applied via colorPalette. For radio and tab appearances this sets the indicator accent color. For button appearance this sets the Panel feedback color. Type "primary" \| "neutral" \| "success" \| "danger" \| "warning" Default "primary" Required No
`size`	size Size of the component. Type "sm" \| "md" \| "lg" Default "md" Required No
`fullWidth`	fullWidth Expand the radio to fill its container width. Type boolean Default false Required No
`id`	id Unique identifier for the radio input, used for label association. Type string Default - Required Yes
`passThrough`	passThrough Per-slot style and attribute overrides. Type { root?: { style?: SystemStyleObject; props?: HTMLLabelAttributes }; input?: { style?: SystemStyleObject; props?: HTMLInputAttributes }; text?: { style?: SystemStyleObject; props?: HTMLAttributes } } Default undefined Required No
`children`	children Label content rendered next to the radio indicator. Type Snippet Default undefined Required No
`...rest`	...rest Standard HTML input attributes (excluding type and size). Type Omit<HTMLInputAttributes, 'type' \| 'size'> Default - Required No

Components

Blocks

#Radio

#Default

#Appearance

radio (default)

button

tab-horizontal

tab-vertical

#Size

radio appearance

button appearance

#Button

Primary (default)

Danger

Warning

Success

#Tab

Tab Horizontal

Tab Vertical

Tab Horizontal — Danger feedback

#With Badge

radio appearance

button appearance

#Custom Styling

Custom root style via passThrough

Custom input style via passThrough

Custom props via passThrough

#Props

Radio

Default

Appearance

Size

Button

Tab

With Badge

Custom Styling

Props