Radio

Default

Astro Svelte React TODO

Preview Code

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 Code

---
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 Code

---
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 Code

---
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 Code

---
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 Code

---
import Radio from "../Radio.astro";
import PindobaBadge 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 <PindobaBadge feedback="primary" size="sm">3</PindobaBadge>
      </Radio>
      <Radio
        id="astro-badge-radio-md"
        name="astro-badge-radio"
        value="md"
        size="md"
      >
        Medium <PindobaBadge feedback="primary" size="sm">3</PindobaBadge>
      </Radio>
      <Radio
        id="astro-badge-radio-lg"
        name="astro-badge-radio"
        value="lg"
        size="lg"
      >
        Large <PindobaBadge feedback="primary" size="sm">3</PindobaBadge>
      </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 <PindobaBadge feedback="primary" size="sm">3</PindobaBadge>
      </Radio>
      <Radio
        id="astro-badge-btn-md"
        name="astro-badge-btn"
        value="md"
        appearance="button"
        size="md"
      >
        Medium <PindobaBadge feedback="primary" size="sm">3</PindobaBadge>
      </Radio>
      <Radio
        id="astro-badge-btn-lg"
        name="astro-badge-btn"
        value="lg"
        appearance="button"
        size="lg"
      >
        Large <PindobaBadge feedback="primary" size="sm">3</PindobaBadge>
      </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>

Leading & Trailing slots

Use the leading and trailing slots to position icons, stamps, or badges at the start and end of the label. With emphasis="adaptive", badges and stamps follow the parent’s color in both unchecked and checked states. The trailing slot pins to the end of the row, which pairs well with fullWidth.

Astro Svelte React TODO

Preview Code

---
import Radio from "../Radio.astro";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { Icon } from "astro-icon/components";
import { stack } from "@pindoba/styled-system/patterns";

const sizes = ["sm", "md", "lg"] as const;
---

<div class={stack({ gap: "lg", direction: "column" })}>
  <div>
    <h3>button appearance — both slots</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {
        sizes.map((size) => (
          <Radio
            id={`astro-lt-rbtn-${size}`}
            appearance="button"
            name="lt-demo-button"
            value={size}
            size={size}
            fullWidth
            checked={size === "md"}
          >
            <Stamp
              slot="leading"
              emphasis="adaptive"
              size="xs"
              shape="circle"
              iconFill
            >
              <Icon name="lucide:mail" />
            </Stamp>
            Unread
            <Badge slot="trailing" emphasis="adaptive" size="sm">
              7
            </Badge>
          </Radio>
        ))
      }
    </div>
  </div>

  <div>
    <h3>button appearance — leading only</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {
        sizes.map((size) => (
          <Radio
            id={`astro-lt-rbtn-leading-${size}`}
            appearance="button"
            name="lt-demo-button-leading"
            value={size}
            size={size}
            fullWidth
            checked={size === "md"}
          >
            <Stamp
              slot="leading"
              emphasis="adaptive"
              size="xs"
              shape="circle"
              iconFill
            >
              <Icon name="lucide:mail" />
            </Stamp>
            Unread
          </Radio>
        ))
      }
    </div>
  </div>

  <div>
    <h3>button appearance — trailing only</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {
        sizes.map((size) => (
          <Radio
            id={`astro-lt-rbtn-trailing-${size}`}
            appearance="button"
            name="lt-demo-button-trailing"
            value={size}
            size={size}
            fullWidth
            checked={size === "md"}
          >
            Unread
            <Badge slot="trailing" emphasis="adaptive" size="sm">
              7
            </Badge>
          </Radio>
        ))
      }
    </div>
  </div>

  <div>
    <h3>radio appearance</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {
        sizes.map((size) => (
          <Radio
            id={`astro-lt-r-${size}`}
            name="lt-demo-radio"
            value={size}
            size={size}
            checked={size === "md"}
          >
            Pro plan
            <Badge slot="trailing" emphasis="adaptive" size="sm">
              $9/mo
            </Badge>
          </Radio>
        ))
      }
    </div>
  </div>
</div>

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

  const sizes = ["sm", "md", "lg"] as const;

  let buttonGroup = $state<string>("md");
  let buttonLeadingGroup = $state<string>("md");
  let buttonTrailingGroup = $state<string>("md");
  let radioGroup = $state<string>("md");
</script>

<div class={stack({ gap: "lg", direction: "column" })}>
  <div>
    <h3>button appearance — both slots</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {#each sizes as size (size)}
        <Radio
          id={`svelte-lt-rbtn-${size}`}
          appearance="button"
          name="svelte-lt-demo-button"
          value={size}
          {size}
          bind:group={buttonGroup}
          fullWidth
        >
          {#snippet leading()}
            <Stamp emphasis="adaptive" size="xs" shape="circle" iconFill>
              <LucideMail />
            </Stamp>
          {/snippet}
          Unread
          {#snippet trailing()}
            <Badge emphasis="adaptive" size="sm">7</Badge>
          {/snippet}
        </Radio>
      {/each}
    </div>
  </div>

  <div>
    <h3>button appearance — leading only</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {#each sizes as size (size)}
        <Radio
          id={`svelte-lt-rbtn-leading-${size}`}
          appearance="button"
          name="svelte-lt-demo-button-leading"
          value={size}
          {size}
          bind:group={buttonLeadingGroup}
          fullWidth
        >
          {#snippet leading()}
            <Stamp emphasis="adaptive" size="xs" shape="circle" iconFill>
              <LucideMail />
            </Stamp>
          {/snippet}
          Unread
        </Radio>
      {/each}
    </div>
  </div>

  <div>
    <h3>button appearance — trailing only</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {#each sizes as size (size)}
        <Radio
          id={`svelte-lt-rbtn-trailing-${size}`}
          appearance="button"
          name="svelte-lt-demo-button-trailing"
          value={size}
          {size}
          bind:group={buttonTrailingGroup}
          fullWidth
        >
          Unread
          {#snippet trailing()}
            <Badge emphasis="adaptive" size="sm">7</Badge>
          {/snippet}
        </Radio>
      {/each}
    </div>
  </div>

  <div>
    <h3>radio appearance</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {#each sizes as size (size)}
        <Radio
          id={`svelte-lt-r-${size}`}
          name="svelte-lt-demo-radio"
          value={size}
          {size}
          bind:group={radioGroup}
        >
          Pro plan
          {#snippet trailing()}
            <Badge emphasis="adaptive" size="sm">$9/mo</Badge>
          {/snippet}
        </Radio>
      {/each}
    </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 Code

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

props · 9 total

prop	type	default	description
appearance	"radio""button""tab-horizontal""tab-vertical"	"radio"	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.
emphasis	"primary""secondary""ghost"	"primary"	Emphasis level for button appearance. primary: Solid accent background. secondary: Surface background with border. ghost: Transparent background.
feedback	"primary""neutral""success""danger""warning"	"primary"	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.
size	"sm""md""lg"	"md"	Size of the component.
fullWidth	boolean	false	Expand the radio to fill its container width.
id	string	-	Unique identifier for the radio input, used for label association.
passThrough	{ root?: { style?: SystemStyleObject; props?: HTMLLabelAttributes }; input?: { style?: SystemStyleObject; props?: HTMLInputAttributes }; text?: { style?: SystemStyleObject; props?: HTMLAttributes } }	undefined	Per-slot style and attribute overrides.
children	Snippet	undefined	Label content rendered next to the radio indicator.
...rest	Omit<HTMLInputAttributes, 'type' \| 'size'>	-	Standard HTML input attributes (excluding type and size).

Components

Blocks

#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

#Leading & Trailing slots

button appearance — both slots

button appearance — leading only

button appearance — trailing only

radio appearance

#Custom Styling

Custom root style via passThrough

Custom input style via passThrough

Custom props via passThrough

#Props

Default

Appearance

Size

Button

Tab

With Badge

Leading & Trailing slots

Custom Styling

Props