Radio

A radio button component for single selection from a group. Supports three appearances: radio (default circular indicator), button (Panel-powered with full emphasis and tone), and tab (minimal underline tab — a 2px accent bar on the bottom edge, or the inline-start edge with orientation="vertical").

Default

PreviewCode

Option 1 Option 2 Disabled

---
// GENERATED from packages/demos/radio/default.demo.tsx — edit the source, not this file.
import Radio from "@pindoba/astro-radio";
import { stack } from "@pindoba/styled-system/patterns";
---

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

Option 1Option 2Disabled

// GENERATED from packages/demos/radio/default.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Radio } from "@pindoba/react-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function DefaultDemo() {
  const [group, setGroup] = useState("option2");
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Radio
        id="react-demo-def-1"
        name="react-demo-default"
        value="option1"
        checked={group === "option1"}
        onChange={() => setGroup("option1")}
      >
        Option 1
      </Radio>
      <Radio
        id="react-demo-def-2"
        name="react-demo-default"
        value="option2"
        checked={group === "option2"}
        onChange={() => setGroup("option2")}
      >
        Option 2
      </Radio>
      <Radio
        id="react-demo-def-3"
        name="react-demo-default"
        value="option3"
        checked={group === "option3"}
        onChange={() => setGroup("option3")}
        disabled
      >
        Disabled
      </Radio>
    </div>
  );
}

Option 1 Option 2 Disabled

<script lang="ts">
  // GENERATED from packages/demos/radio/default.demo.tsx — edit the source, not this file.
  import Radio from "@pindoba/svelte-radio";
  import { stack } from "@pindoba/styled-system/patterns";

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

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

Option 1 Option 2 Disabled

<script setup lang="ts">
// GENERATED from packages/demos/radio/default.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";

const group = ref("option2");
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <Radio
      id="vue-demo-def-1"
      name="vue-demo-default"
      value="option1"
      :checked="group === 'option1'"
      :onChange="() => (group = 'option1')"
    >
      Option 1
    </Radio>
    <Radio
      id="vue-demo-def-2"
      name="vue-demo-default"
      value="option2"
      :checked="group === 'option2'"
      :onChange="() => (group = 'option2')"
    >
      Option 2
    </Radio>
    <Radio
      id="vue-demo-def-3"
      name="vue-demo-default"
      value="option3"
      :checked="group === 'option3'"
      :onChange="() => (group = 'option3')"
      :disabled="true"
    >
      Disabled
    </Radio>
  </div>
</template>

Option 1Option 2Disabled

// GENERATED from packages/demos/radio/default.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Radio } from "@pindoba/solid-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function DefaultDemo() {
  const [group, setGroup] = createSignal("option2");
  return (
    <div class={stack({ gap: "md", direction: "column" })}>
      <Radio
        id="solid-demo-def-1"
        name="solid-demo-default"
        value="option1"
        checked={group() === "option1"}
        onChange={() => setGroup("option1")}
      >
        Option 1
      </Radio>
      <Radio
        id="solid-demo-def-2"
        name="solid-demo-default"
        value="option2"
        checked={group() === "option2"}
        onChange={() => setGroup("option2")}
      >
        Option 2
      </Radio>
      <Radio
        id="solid-demo-def-3"
        name="solid-demo-default"
        value="option3"
        checked={group() === "option3"}
        onChange={() => setGroup("option3")}
        disabled
      >
        Disabled
      </Radio>
    </div>
  );
}

Appearance

All four appearance variants side by side.

PreviewCode

---
// GENERATED from packages/demos/radio/appearance.demo.tsx — edit the source, not this file.
import Radio from "@pindoba/astro-radio";
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-demo-app-r1" name="astro-demo-app-radio" value="app-r1">
        Option 1
      </Radio>
      <Radio
        id="astro-demo-app-r2"
        name="astro-demo-app-radio"
        value="app-r2"
        checked
      >
        Option 2
      </Radio>
    </div>
  </div>

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

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

  <div>
    <h3>tab (vertical)</h3>
    <div class={stack({ gap: "xs", direction: "column" })}>
      <Radio
        id="astro-demo-app-tv1"
        name="astro-demo-app-tab-v"
        value="app-tv1"
        appearance="tab"
        orientation="vertical"
        checked
      >
        Tab 1
      </Radio>
      <Radio
        id="astro-demo-app-tv2"
        name="astro-demo-app-tab-v"
        value="app-tv2"
        appearance="tab"
        orientation="vertical"
      >
        Tab 2
      </Radio>
    </div>
  </div>
</div>

// GENERATED from packages/demos/radio/appearance.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Radio } from "@pindoba/react-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function AppearanceDemo() {
  const [radioGroup, setRadioGroup] = useState("app-r2");
  const [buttonGroup, setButtonGroup] = useState("app-b1");
  const [tabHGroup, setTabHGroup] = useState("app-th1");
  const [tabVGroup, setTabVGroup] = useState("app-tv1");
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>radio (default)</h3>
        <div className={stack({ gap: "md", direction: "column" })}>
          <Radio
            id="react-demo-app-r1"
            name="react-demo-app-radio"
            value="app-r1"
            checked={radioGroup === "app-r1"}
            onChange={() => setRadioGroup("app-r1")}
          >
            Option 1
          </Radio>
          <Radio
            id="react-demo-app-r2"
            name="react-demo-app-radio"
            value="app-r2"
            checked={radioGroup === "app-r2"}
            onChange={() => setRadioGroup("app-r2")}
          >
            Option 2
          </Radio>
        </div>
      </div>

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

      <div>
        <h3>tab (horizontal)</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Radio
            id="react-demo-app-th1"
            name="react-demo-app-tab-h"
            value="app-th1"
            appearance="tab"
            checked={tabHGroup === "app-th1"}
            onChange={() => setTabHGroup("app-th1")}
          >
            Tab 1
          </Radio>
          <Radio
            id="react-demo-app-th2"
            name="react-demo-app-tab-h"
            value="app-th2"
            appearance="tab"
            checked={tabHGroup === "app-th2"}
            onChange={() => setTabHGroup("app-th2")}
          >
            Tab 2
          </Radio>
          <Radio
            id="react-demo-app-th3"
            name="react-demo-app-tab-h"
            value="app-th3"
            appearance="tab"
            checked={tabHGroup === "app-th3"}
            onChange={() => setTabHGroup("app-th3")}
          >
            Tab 3
          </Radio>
        </div>
      </div>

      <div>
        <h3>tab (vertical)</h3>
        <div className={stack({ gap: "xs", direction: "column" })}>
          <Radio
            id="react-demo-app-tv1"
            name="react-demo-app-tab-v"
            value="app-tv1"
            appearance="tab"
            orientation="vertical"
            checked={tabVGroup === "app-tv1"}
            onChange={() => setTabVGroup("app-tv1")}
          >
            Tab 1
          </Radio>
          <Radio
            id="react-demo-app-tv2"
            name="react-demo-app-tab-v"
            value="app-tv2"
            appearance="tab"
            orientation="vertical"
            checked={tabVGroup === "app-tv2"}
            onChange={() => setTabVGroup("app-tv2")}
          >
            Tab 2
          </Radio>
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/radio/appearance.demo.tsx — edit the source, not this file.
  import Radio from "@pindoba/svelte-radio";
  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-demo-app-r1"
        name="svelte-demo-app-radio"
        value="app-r1"
        bind:group={radioGroup}
      >
        Option 1
      </Radio>
      <Radio
        id="svelte-demo-app-r2"
        name="svelte-demo-app-radio"
        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-demo-app-b1"
        name="svelte-demo-app-button"
        value="app-b1"
        appearance="button"
        bind:group={buttonGroup}
      >
        Option 1
      </Radio>
      <Radio
        id="svelte-demo-app-b2"
        name="svelte-demo-app-button"
        value="app-b2"
        appearance="button"
        bind:group={buttonGroup}
      >
        Option 2
      </Radio>
      <Radio
        id="svelte-demo-app-b3"
        name="svelte-demo-app-button"
        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-demo-app-th1"
        name="svelte-demo-app-tab-h"
        value="app-th1"
        appearance="tab"
        bind:group={tabHGroup}
      >
        Tab 1
      </Radio>
      <Radio
        id="svelte-demo-app-th2"
        name="svelte-demo-app-tab-h"
        value="app-th2"
        appearance="tab"
        bind:group={tabHGroup}
      >
        Tab 2
      </Radio>
      <Radio
        id="svelte-demo-app-th3"
        name="svelte-demo-app-tab-h"
        value="app-th3"
        appearance="tab"
        bind:group={tabHGroup}
      >
        Tab 3
      </Radio>
    </div>
  </div>

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

<script setup lang="ts">
// GENERATED from packages/demos/radio/appearance.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";

const radioGroup = ref("app-r2");
const buttonGroup = ref("app-b1");
const tabHGroup = ref("app-th1");
const tabVGroup = ref("app-tv1");
</script>

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

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

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

    <div>
      <h3>tab (vertical)</h3>
      <div :class="stack({ gap: 'xs', direction: 'column' })">
        <Radio
          id="vue-demo-app-tv1"
          name="vue-demo-app-tab-v"
          value="app-tv1"
          appearance="tab"
          orientation="vertical"
          :checked="tabVGroup === 'app-tv1'"
          :onChange="() => (tabVGroup = 'app-tv1')"
        >
          Tab 1
        </Radio>
        <Radio
          id="vue-demo-app-tv2"
          name="vue-demo-app-tab-v"
          value="app-tv2"
          appearance="tab"
          orientation="vertical"
          :checked="tabVGroup === 'app-tv2'"
          :onChange="() => (tabVGroup = 'app-tv2')"
        >
          Tab 2
        </Radio>
      </div>
    </div>
  </div>
</template>

// GENERATED from packages/demos/radio/appearance.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Radio } from "@pindoba/solid-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function AppearanceDemo() {
  const [radioGroup, setRadioGroup] = createSignal("app-r2");
  const [buttonGroup, setButtonGroup] = createSignal("app-b1");
  const [tabHGroup, setTabHGroup] = createSignal("app-th1");
  const [tabVGroup, setTabVGroup] = createSignal("app-tv1");
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>radio (default)</h3>
        <div class={stack({ gap: "md", direction: "column" })}>
          <Radio
            id="solid-demo-app-r1"
            name="solid-demo-app-radio"
            value="app-r1"
            checked={radioGroup() === "app-r1"}
            onChange={() => setRadioGroup("app-r1")}
          >
            Option 1
          </Radio>
          <Radio
            id="solid-demo-app-r2"
            name="solid-demo-app-radio"
            value="app-r2"
            checked={radioGroup() === "app-r2"}
            onChange={() => setRadioGroup("app-r2")}
          >
            Option 2
          </Radio>
        </div>
      </div>

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

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

      <div>
        <h3>tab (vertical)</h3>
        <div class={stack({ gap: "xs", direction: "column" })}>
          <Radio
            id="solid-demo-app-tv1"
            name="solid-demo-app-tab-v"
            value="app-tv1"
            appearance="tab"
            orientation="vertical"
            checked={tabVGroup() === "app-tv1"}
            onChange={() => setTabVGroup("app-tv1")}
          >
            Tab 1
          </Radio>
          <Radio
            id="solid-demo-app-tv2"
            name="solid-demo-app-tab-v"
            value="app-tv2"
            appearance="tab"
            orientation="vertical"
            checked={tabVGroup() === "app-tv2"}
            onChange={() => setTabVGroup("app-tv2")}
          >
            Tab 2
          </Radio>
        </div>
      </div>
    </div>
  );
}

Size

Three sizes are available across all appearances.

PreviewCode

---
// GENERATED from packages/demos/radio/size.demo.tsx — edit the source, not this file.
import Radio from "@pindoba/astro-radio";
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-demo-size-sm"
        name="astro-demo-size-radio"
        value="size-sm"
        size="sm"
        checked
      >
        Small
      </Radio>
      <Radio
        id="astro-demo-size-md"
        name="astro-demo-size-radio"
        value="size-md"
        size="md"
      >
        Medium
      </Radio>
      <Radio
        id="astro-demo-size-lg"
        name="astro-demo-size-radio"
        value="size-lg"
        size="lg"
      >
        Large
      </Radio>
    </div>
  </div>

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

// GENERATED from packages/demos/radio/size.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Radio } from "@pindoba/react-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function SizeDemo() {
  const [radioGroup, setRadioGroup] = useState("size-sm");
  const [buttonGroup, setButtonGroup] = useState("sbtn-sm");
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>radio appearance</h3>
        <div
          className={stack({ gap: "sm", direction: "row", align: "center" })}
        >
          <Radio
            id="react-demo-size-sm"
            name="react-demo-size-radio"
            value="size-sm"
            size="sm"
            checked={radioGroup === "size-sm"}
            onChange={() => setRadioGroup("size-sm")}
          >
            Small
          </Radio>
          <Radio
            id="react-demo-size-md"
            name="react-demo-size-radio"
            value="size-md"
            size="md"
            checked={radioGroup === "size-md"}
            onChange={() => setRadioGroup("size-md")}
          >
            Medium
          </Radio>
          <Radio
            id="react-demo-size-lg"
            name="react-demo-size-radio"
            value="size-lg"
            size="lg"
            checked={radioGroup === "size-lg"}
            onChange={() => setRadioGroup("size-lg")}
          >
            Large
          </Radio>
        </div>
      </div>

      <div>
        <h3>button appearance</h3>
        <div
          className={stack({ gap: "sm", direction: "row", align: "center" })}
        >
          <Radio
            id="react-demo-sbtn-sm"
            name="react-demo-size-button"
            value="sbtn-sm"
            appearance="button"
            size="sm"
            checked={buttonGroup === "sbtn-sm"}
            onChange={() => setButtonGroup("sbtn-sm")}
          >
            Small
          </Radio>
          <Radio
            id="react-demo-sbtn-md"
            name="react-demo-size-button"
            value="sbtn-md"
            appearance="button"
            size="md"
            checked={buttonGroup === "sbtn-md"}
            onChange={() => setButtonGroup("sbtn-md")}
          >
            Medium
          </Radio>
          <Radio
            id="react-demo-sbtn-lg"
            name="react-demo-size-button"
            value="sbtn-lg"
            appearance="button"
            size="lg"
            checked={buttonGroup === "sbtn-lg"}
            onChange={() => setButtonGroup("sbtn-lg")}
          >
            Large
          </Radio>
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/radio/size.demo.tsx — edit the source, not this file.
  import Radio from "@pindoba/svelte-radio";
  import { stack } from "@pindoba/styled-system/patterns";

  let radioGroup = $state("size-sm");
  let buttonGroup = $state("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-demo-size-sm"
        name="svelte-demo-size-radio"
        value="size-sm"
        size="sm"
        bind:group={radioGroup}
      >
        Small
      </Radio>
      <Radio
        id="svelte-demo-size-md"
        name="svelte-demo-size-radio"
        value="size-md"
        size="md"
        bind:group={radioGroup}
      >
        Medium
      </Radio>
      <Radio
        id="svelte-demo-size-lg"
        name="svelte-demo-size-radio"
        value="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-demo-sbtn-sm"
        name="svelte-demo-size-button"
        value="sbtn-sm"
        appearance="button"
        size="sm"
        bind:group={buttonGroup}
      >
        Small
      </Radio>
      <Radio
        id="svelte-demo-sbtn-md"
        name="svelte-demo-size-button"
        value="sbtn-md"
        appearance="button"
        size="md"
        bind:group={buttonGroup}
      >
        Medium
      </Radio>
      <Radio
        id="svelte-demo-sbtn-lg"
        name="svelte-demo-size-button"
        value="sbtn-lg"
        appearance="button"
        size="lg"
        bind:group={buttonGroup}
      >
        Large
      </Radio>
    </div>
  </div>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/radio/size.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";

const radioGroup = ref("size-sm");
const buttonGroup = ref("sbtn-sm");
</script>

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

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

// GENERATED from packages/demos/radio/size.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Radio } from "@pindoba/solid-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function SizeDemo() {
  const [radioGroup, setRadioGroup] = createSignal("size-sm");
  const [buttonGroup, setButtonGroup] = createSignal("sbtn-sm");
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>radio appearance</h3>
        <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
          <Radio
            id="solid-demo-size-sm"
            name="solid-demo-size-radio"
            value="size-sm"
            size="sm"
            checked={radioGroup() === "size-sm"}
            onChange={() => setRadioGroup("size-sm")}
          >
            Small
          </Radio>
          <Radio
            id="solid-demo-size-md"
            name="solid-demo-size-radio"
            value="size-md"
            size="md"
            checked={radioGroup() === "size-md"}
            onChange={() => setRadioGroup("size-md")}
          >
            Medium
          </Radio>
          <Radio
            id="solid-demo-size-lg"
            name="solid-demo-size-radio"
            value="size-lg"
            size="lg"
            checked={radioGroup() === "size-lg"}
            onChange={() => setRadioGroup("size-lg")}
          >
            Large
          </Radio>
        </div>
      </div>

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

Button

appearance="button" composes with Panel — use tone (primary, success, danger, warning, neutral) to control the surface.

PreviewCode

---
// GENERATED from packages/demos/radio/button.demo.tsx — edit the source, not this file.
import Radio from "@pindoba/astro-radio";
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-demo-btn-p1"
        name="astro-demo-btn-primary"
        value="btn-p1"
        appearance="button"
        checked
      >
        Option 1
      </Radio>
      <Radio
        id="astro-demo-btn-p2"
        name="astro-demo-btn-primary"
        value="btn-p2"
        appearance="button"
      >
        Option 2
      </Radio>
      <Radio
        id="astro-demo-btn-p3"
        name="astro-demo-btn-primary"
        value="btn-p3"
        appearance="button"
      >
        Option 3
      </Radio>
    </div>
  </div>

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

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

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

// GENERATED from packages/demos/radio/button.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Radio } from "@pindoba/react-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function ButtonDemo() {
  const [primaryGroup, setPrimaryGroup] = useState("btn-p1");
  const [dangerGroup, setDangerGroup] = useState("btn-d1");
  const [warningGroup, setWarningGroup] = useState("btn-w1");
  const [successGroup, setSuccessGroup] = useState("btn-s1");
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Primary (default)</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Radio
            id="react-demo-btn-p1"
            name="react-demo-btn-primary"
            value="btn-p1"
            appearance="button"
            checked={primaryGroup === "btn-p1"}
            onChange={() => setPrimaryGroup("btn-p1")}
          >
            Option 1
          </Radio>
          <Radio
            id="react-demo-btn-p2"
            name="react-demo-btn-primary"
            value="btn-p2"
            appearance="button"
            checked={primaryGroup === "btn-p2"}
            onChange={() => setPrimaryGroup("btn-p2")}
          >
            Option 2
          </Radio>
          <Radio
            id="react-demo-btn-p3"
            name="react-demo-btn-primary"
            value="btn-p3"
            appearance="button"
            checked={primaryGroup === "btn-p3"}
            onChange={() => setPrimaryGroup("btn-p3")}
          >
            Option 3
          </Radio>
        </div>
      </div>

      <div>
        <h3>Danger</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Radio
            id="react-demo-btn-d1"
            name="react-demo-btn-danger"
            value="btn-d1"
            appearance="button"
            tone="danger"
            checked={dangerGroup === "btn-d1"}
            onChange={() => setDangerGroup("btn-d1")}
          >
            Option 1
          </Radio>
          <Radio
            id="react-demo-btn-d2"
            name="react-demo-btn-danger"
            value="btn-d2"
            appearance="button"
            tone="danger"
            checked={dangerGroup === "btn-d2"}
            onChange={() => setDangerGroup("btn-d2")}
          >
            Option 2
          </Radio>
        </div>
      </div>

      <div>
        <h3>Warning</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Radio
            id="react-demo-btn-w1"
            name="react-demo-btn-warning"
            value="btn-w1"
            appearance="button"
            tone="warning"
            checked={warningGroup === "btn-w1"}
            onChange={() => setWarningGroup("btn-w1")}
          >
            Option 1
          </Radio>
          <Radio
            id="react-demo-btn-w2"
            name="react-demo-btn-warning"
            value="btn-w2"
            appearance="button"
            tone="warning"
            checked={warningGroup === "btn-w2"}
            onChange={() => setWarningGroup("btn-w2")}
          >
            Option 2
          </Radio>
        </div>
      </div>

      <div>
        <h3>Success</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Radio
            id="react-demo-btn-s1"
            name="react-demo-btn-success"
            value="btn-s1"
            appearance="button"
            tone="success"
            checked={successGroup === "btn-s1"}
            onChange={() => setSuccessGroup("btn-s1")}
          >
            Option 1
          </Radio>
          <Radio
            id="react-demo-btn-s2"
            name="react-demo-btn-success"
            value="btn-s2"
            appearance="button"
            tone="success"
            checked={successGroup === "btn-s2"}
            onChange={() => setSuccessGroup("btn-s2")}
          >
            Option 2
          </Radio>
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/radio/button.demo.tsx — edit the source, not this file.
  import Radio from "@pindoba/svelte-radio";
  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-demo-btn-p1"
        name="svelte-demo-btn-primary"
        value="btn-p1"
        appearance="button"
        bind:group={primaryGroup}
      >
        Option 1
      </Radio>
      <Radio
        id="svelte-demo-btn-p2"
        name="svelte-demo-btn-primary"
        value="btn-p2"
        appearance="button"
        bind:group={primaryGroup}
      >
        Option 2
      </Radio>
      <Radio
        id="svelte-demo-btn-p3"
        name="svelte-demo-btn-primary"
        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-demo-btn-d1"
        name="svelte-demo-btn-danger"
        value="btn-d1"
        appearance="button"
        tone="danger"
        bind:group={dangerGroup}
      >
        Option 1
      </Radio>
      <Radio
        id="svelte-demo-btn-d2"
        name="svelte-demo-btn-danger"
        value="btn-d2"
        appearance="button"
        tone="danger"
        bind:group={dangerGroup}
      >
        Option 2
      </Radio>
    </div>
  </div>

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

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

<script setup lang="ts">
// GENERATED from packages/demos/radio/button.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";

const primaryGroup = ref("btn-p1");
const dangerGroup = ref("btn-d1");
const warningGroup = ref("btn-w1");
const successGroup = ref("btn-s1");
</script>

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

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

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

    <div>
      <h3>Success</h3>
      <div :class="stack({ gap: 'sm', direction: 'row' })">
        <Radio
          id="vue-demo-btn-s1"
          name="vue-demo-btn-success"
          value="btn-s1"
          appearance="button"
          tone="success"
          :checked="successGroup === 'btn-s1'"
          :onChange="() => (successGroup = 'btn-s1')"
        >
          Option 1
        </Radio>
        <Radio
          id="vue-demo-btn-s2"
          name="vue-demo-btn-success"
          value="btn-s2"
          appearance="button"
          tone="success"
          :checked="successGroup === 'btn-s2'"
          :onChange="() => (successGroup = 'btn-s2')"
        >
          Option 2
        </Radio>
      </div>
    </div>
  </div>
</template>

// GENERATED from packages/demos/radio/button.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Radio } from "@pindoba/solid-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function ButtonDemo() {
  const [primaryGroup, setPrimaryGroup] = createSignal("btn-p1");
  const [dangerGroup, setDangerGroup] = createSignal("btn-d1");
  const [warningGroup, setWarningGroup] = createSignal("btn-w1");
  const [successGroup, setSuccessGroup] = createSignal("btn-s1");
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Primary (default)</h3>
        <div class={stack({ gap: "sm", direction: "row" })}>
          <Radio
            id="solid-demo-btn-p1"
            name="solid-demo-btn-primary"
            value="btn-p1"
            appearance="button"
            checked={primaryGroup() === "btn-p1"}
            onChange={() => setPrimaryGroup("btn-p1")}
          >
            Option 1
          </Radio>
          <Radio
            id="solid-demo-btn-p2"
            name="solid-demo-btn-primary"
            value="btn-p2"
            appearance="button"
            checked={primaryGroup() === "btn-p2"}
            onChange={() => setPrimaryGroup("btn-p2")}
          >
            Option 2
          </Radio>
          <Radio
            id="solid-demo-btn-p3"
            name="solid-demo-btn-primary"
            value="btn-p3"
            appearance="button"
            checked={primaryGroup() === "btn-p3"}
            onChange={() => setPrimaryGroup("btn-p3")}
          >
            Option 3
          </Radio>
        </div>
      </div>

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

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

      <div>
        <h3>Success</h3>
        <div class={stack({ gap: "sm", direction: "row" })}>
          <Radio
            id="solid-demo-btn-s1"
            name="solid-demo-btn-success"
            value="btn-s1"
            appearance="button"
            tone="success"
            checked={successGroup() === "btn-s1"}
            onChange={() => setSuccessGroup("btn-s1")}
          >
            Option 1
          </Radio>
          <Radio
            id="solid-demo-btn-s2"
            name="solid-demo-btn-success"
            value="btn-s2"
            appearance="button"
            tone="success"
            checked={successGroup() === "btn-s2"}
            onChange={() => setSuccessGroup("btn-s2")}
          >
            Option 2
          </Radio>
        </div>
      </div>
    </div>
  );
}

Emphasis

For appearance="button", the emphasis prop controls how the unchecked and checked states relate to each other. primary (default) keeps today’s filled-accent look. secondary rides the colorPalette.surface.* ramp and swaps to the opposite ramp position when checked. tertiary stays on a neutral surface with accent-colored text and a muted border. The background prop still picks the starting position; hover and active step through the ramp from there.

The border prop owns the resting border. Secondary and tertiary default to "muted" and promote to "default" on the checked state; primary defaults to "default" everywhere (and the accent ring on checked is part of primary’s filled identity). Pass border="none" to remove the resting border entirely (great with tertiary for a borderless segmented look) or border="bold" | "accent" to intensify it.

PreviewCode

---
// GENERATED from packages/demos/radio/emphasis.demo.tsx — edit the source, not this file.
import Radio from "@pindoba/astro-radio";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Primary (default)</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="astro-demo-ebtn-p1"
          name="astro-demo-ebtn-p"
          value="ebtn-p1"
          appearance="button"
          checked
        >
          Option 1
        </Radio>
        <Radio
          id="astro-demo-ebtn-p2"
          name="astro-demo-ebtn-p"
          value="ebtn-p2"
          appearance="button"
        >
          Option 2
        </Radio>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="astro-demo-ebtn-pn1"
          name="astro-demo-ebtn-pn"
          value="ebtn-pn1"
          appearance="button"
          tone="neutral"
          checked
        >
          Neutral 1
        </Radio>
        <Radio
          id="astro-demo-ebtn-pn2"
          name="astro-demo-ebtn-pn"
          value="ebtn-pn2"
          appearance="button"
          tone="neutral"
        >
          Neutral 2
        </Radio>
      </div>
    </div>
  </div>

  <div>
    <h3>Secondary</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="astro-demo-ebtn-s1"
          name="astro-demo-ebtn-s"
          value="ebtn-s1"
          appearance="button"
          emphasis="secondary"
          checked
        >
          Option 1
        </Radio>
        <Radio
          id="astro-demo-ebtn-s2"
          name="astro-demo-ebtn-s"
          value="ebtn-s2"
          appearance="button"
          emphasis="secondary"
        >
          Option 2
        </Radio>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="astro-demo-ebtn-sn1"
          name="astro-demo-ebtn-sn"
          value="ebtn-sn1"
          appearance="button"
          emphasis="secondary"
          tone="neutral"
          checked
        >
          Neutral 1
        </Radio>
        <Radio
          id="astro-demo-ebtn-sn2"
          name="astro-demo-ebtn-sn"
          value="ebtn-sn2"
          appearance="button"
          emphasis="secondary"
          tone="neutral"
        >
          Neutral 2
        </Radio>
      </div>
    </div>
  </div>

  <div>
    <h3>Tertiary</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="astro-demo-ebtn-t1"
          name="astro-demo-ebtn-t"
          value="ebtn-t1"
          appearance="button"
          emphasis="tertiary"
          checked
        >
          Option 1
        </Radio>
        <Radio
          id="astro-demo-ebtn-t2"
          name="astro-demo-ebtn-t"
          value="ebtn-t2"
          appearance="button"
          emphasis="tertiary"
        >
          Option 2
        </Radio>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="astro-demo-ebtn-tn1"
          name="astro-demo-ebtn-tn"
          value="ebtn-tn1"
          appearance="button"
          emphasis="tertiary"
          tone="neutral"
          checked
        >
          Neutral 1
        </Radio>
        <Radio
          id="astro-demo-ebtn-tn2"
          name="astro-demo-ebtn-tn"
          value="ebtn-tn2"
          appearance="button"
          emphasis="tertiary"
          tone="neutral"
        >
          Neutral 2
        </Radio>
      </div>
    </div>
  </div>

  <div>
    <h3>Secondary + tone</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="astro-demo-ebtn-fbn"
        name="astro-demo-ebtn-fb"
        value="ebtn-fbn"
        appearance="button"
        emphasis="secondary"
        tone="neutral"
        checked
      >
        Neutral
      </Radio>
      <Radio
        id="astro-demo-ebtn-fbd"
        name="astro-demo-ebtn-fb"
        value="ebtn-fbd"
        appearance="button"
        emphasis="secondary"
        tone="danger"
      >
        Danger
      </Radio>
      <Radio
        id="astro-demo-ebtn-fbw"
        name="astro-demo-ebtn-fb"
        value="ebtn-fbw"
        appearance="button"
        emphasis="secondary"
        tone="warning"
      >
        Warning
      </Radio>
      <Radio
        id="astro-demo-ebtn-fbs"
        name="astro-demo-ebtn-fb"
        value="ebtn-fbs"
        appearance="button"
        emphasis="secondary"
        tone="success"
      >
        Success
      </Radio>
    </div>
  </div>
</div>

// GENERATED from packages/demos/radio/emphasis.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Radio } from "@pindoba/react-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function EmphasisDemo() {
  const [primaryGroup, setPrimaryGroup] = useState("ebtn-p1");
  const [primaryNeutralGroup, setPrimaryNeutralGroup] = useState("ebtn-pn1");
  const [secondaryGroup, setSecondaryGroup] = useState("ebtn-s1");
  const [secondaryNeutralGroup, setSecondaryNeutralGroup] =
    useState("ebtn-sn1");
  const [tertiaryGroup, setTertiaryGroup] = useState("ebtn-t1");
  const [tertiaryNeutralGroup, setTertiaryNeutralGroup] = useState("ebtn-tn1");
  const [feedbackGroup, setFeedbackGroup] = useState("ebtn-fbn");
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Primary (default)</h3>
        <div className={stack({ gap: "lg", direction: "row" })}>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Radio
              id="react-demo-ebtn-p1"
              name="react-demo-ebtn-p"
              value="ebtn-p1"
              appearance="button"
              checked={primaryGroup === "ebtn-p1"}
              onChange={() => setPrimaryGroup("ebtn-p1")}
            >
              Option 1
            </Radio>
            <Radio
              id="react-demo-ebtn-p2"
              name="react-demo-ebtn-p"
              value="ebtn-p2"
              appearance="button"
              checked={primaryGroup === "ebtn-p2"}
              onChange={() => setPrimaryGroup("ebtn-p2")}
            >
              Option 2
            </Radio>
          </div>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Radio
              id="react-demo-ebtn-pn1"
              name="react-demo-ebtn-pn"
              value="ebtn-pn1"
              appearance="button"
              tone="neutral"
              checked={primaryNeutralGroup === "ebtn-pn1"}
              onChange={() => setPrimaryNeutralGroup("ebtn-pn1")}
            >
              Neutral 1
            </Radio>
            <Radio
              id="react-demo-ebtn-pn2"
              name="react-demo-ebtn-pn"
              value="ebtn-pn2"
              appearance="button"
              tone="neutral"
              checked={primaryNeutralGroup === "ebtn-pn2"}
              onChange={() => setPrimaryNeutralGroup("ebtn-pn2")}
            >
              Neutral 2
            </Radio>
          </div>
        </div>
      </div>

      <div>
        <h3>Secondary</h3>
        <div className={stack({ gap: "lg", direction: "row" })}>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Radio
              id="react-demo-ebtn-s1"
              name="react-demo-ebtn-s"
              value="ebtn-s1"
              appearance="button"
              emphasis="secondary"
              checked={secondaryGroup === "ebtn-s1"}
              onChange={() => setSecondaryGroup("ebtn-s1")}
            >
              Option 1
            </Radio>
            <Radio
              id="react-demo-ebtn-s2"
              name="react-demo-ebtn-s"
              value="ebtn-s2"
              appearance="button"
              emphasis="secondary"
              checked={secondaryGroup === "ebtn-s2"}
              onChange={() => setSecondaryGroup("ebtn-s2")}
            >
              Option 2
            </Radio>
          </div>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Radio
              id="react-demo-ebtn-sn1"
              name="react-demo-ebtn-sn"
              value="ebtn-sn1"
              appearance="button"
              emphasis="secondary"
              tone="neutral"
              checked={secondaryNeutralGroup === "ebtn-sn1"}
              onChange={() => setSecondaryNeutralGroup("ebtn-sn1")}
            >
              Neutral 1
            </Radio>
            <Radio
              id="react-demo-ebtn-sn2"
              name="react-demo-ebtn-sn"
              value="ebtn-sn2"
              appearance="button"
              emphasis="secondary"
              tone="neutral"
              checked={secondaryNeutralGroup === "ebtn-sn2"}
              onChange={() => setSecondaryNeutralGroup("ebtn-sn2")}
            >
              Neutral 2
            </Radio>
          </div>
        </div>
      </div>

      <div>
        <h3>Tertiary</h3>
        <div className={stack({ gap: "lg", direction: "row" })}>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Radio
              id="react-demo-ebtn-t1"
              name="react-demo-ebtn-t"
              value="ebtn-t1"
              appearance="button"
              emphasis="tertiary"
              checked={tertiaryGroup === "ebtn-t1"}
              onChange={() => setTertiaryGroup("ebtn-t1")}
            >
              Option 1
            </Radio>
            <Radio
              id="react-demo-ebtn-t2"
              name="react-demo-ebtn-t"
              value="ebtn-t2"
              appearance="button"
              emphasis="tertiary"
              checked={tertiaryGroup === "ebtn-t2"}
              onChange={() => setTertiaryGroup("ebtn-t2")}
            >
              Option 2
            </Radio>
          </div>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Radio
              id="react-demo-ebtn-tn1"
              name="react-demo-ebtn-tn"
              value="ebtn-tn1"
              appearance="button"
              emphasis="tertiary"
              tone="neutral"
              checked={tertiaryNeutralGroup === "ebtn-tn1"}
              onChange={() => setTertiaryNeutralGroup("ebtn-tn1")}
            >
              Neutral 1
            </Radio>
            <Radio
              id="react-demo-ebtn-tn2"
              name="react-demo-ebtn-tn"
              value="ebtn-tn2"
              appearance="button"
              emphasis="tertiary"
              tone="neutral"
              checked={tertiaryNeutralGroup === "ebtn-tn2"}
              onChange={() => setTertiaryNeutralGroup("ebtn-tn2")}
            >
              Neutral 2
            </Radio>
          </div>
        </div>
      </div>

      <div>
        <h3>Secondary + tone</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Radio
            id="react-demo-ebtn-fbn"
            name="react-demo-ebtn-fb"
            value="ebtn-fbn"
            appearance="button"
            emphasis="secondary"
            tone="neutral"
            checked={feedbackGroup === "ebtn-fbn"}
            onChange={() => setFeedbackGroup("ebtn-fbn")}
          >
            Neutral
          </Radio>
          <Radio
            id="react-demo-ebtn-fbd"
            name="react-demo-ebtn-fb"
            value="ebtn-fbd"
            appearance="button"
            emphasis="secondary"
            tone="danger"
            checked={feedbackGroup === "ebtn-fbd"}
            onChange={() => setFeedbackGroup("ebtn-fbd")}
          >
            Danger
          </Radio>
          <Radio
            id="react-demo-ebtn-fbw"
            name="react-demo-ebtn-fb"
            value="ebtn-fbw"
            appearance="button"
            emphasis="secondary"
            tone="warning"
            checked={feedbackGroup === "ebtn-fbw"}
            onChange={() => setFeedbackGroup("ebtn-fbw")}
          >
            Warning
          </Radio>
          <Radio
            id="react-demo-ebtn-fbs"
            name="react-demo-ebtn-fb"
            value="ebtn-fbs"
            appearance="button"
            emphasis="secondary"
            tone="success"
            checked={feedbackGroup === "ebtn-fbs"}
            onChange={() => setFeedbackGroup("ebtn-fbs")}
          >
            Success
          </Radio>
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/radio/emphasis.demo.tsx — edit the source, not this file.
  import Radio from "@pindoba/svelte-radio";
  import { stack } from "@pindoba/styled-system/patterns";

  let primaryGroup = $state("ebtn-p1");
  let primaryNeutralGroup = $state("ebtn-pn1");
  let secondaryGroup = $state("ebtn-s1");
  let secondaryNeutralGroup = $state("ebtn-sn1");
  let tertiaryGroup = $state("ebtn-t1");
  let tertiaryNeutralGroup = $state("ebtn-tn1");
  let feedbackGroup = $state("ebtn-fbn");
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Primary (default)</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="svelte-demo-ebtn-p1"
          name="svelte-demo-ebtn-p"
          value="ebtn-p1"
          appearance="button"
          bind:group={primaryGroup}
        >
          Option 1
        </Radio>
        <Radio
          id="svelte-demo-ebtn-p2"
          name="svelte-demo-ebtn-p"
          value="ebtn-p2"
          appearance="button"
          bind:group={primaryGroup}
        >
          Option 2
        </Radio>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="svelte-demo-ebtn-pn1"
          name="svelte-demo-ebtn-pn"
          value="ebtn-pn1"
          appearance="button"
          tone="neutral"
          bind:group={primaryNeutralGroup}
        >
          Neutral 1
        </Radio>
        <Radio
          id="svelte-demo-ebtn-pn2"
          name="svelte-demo-ebtn-pn"
          value="ebtn-pn2"
          appearance="button"
          tone="neutral"
          bind:group={primaryNeutralGroup}
        >
          Neutral 2
        </Radio>
      </div>
    </div>
  </div>

  <div>
    <h3>Secondary</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="svelte-demo-ebtn-s1"
          name="svelte-demo-ebtn-s"
          value="ebtn-s1"
          appearance="button"
          emphasis="secondary"
          bind:group={secondaryGroup}
        >
          Option 1
        </Radio>
        <Radio
          id="svelte-demo-ebtn-s2"
          name="svelte-demo-ebtn-s"
          value="ebtn-s2"
          appearance="button"
          emphasis="secondary"
          bind:group={secondaryGroup}
        >
          Option 2
        </Radio>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="svelte-demo-ebtn-sn1"
          name="svelte-demo-ebtn-sn"
          value="ebtn-sn1"
          appearance="button"
          emphasis="secondary"
          tone="neutral"
          bind:group={secondaryNeutralGroup}
        >
          Neutral 1
        </Radio>
        <Radio
          id="svelte-demo-ebtn-sn2"
          name="svelte-demo-ebtn-sn"
          value="ebtn-sn2"
          appearance="button"
          emphasis="secondary"
          tone="neutral"
          bind:group={secondaryNeutralGroup}
        >
          Neutral 2
        </Radio>
      </div>
    </div>
  </div>

  <div>
    <h3>Tertiary</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="svelte-demo-ebtn-t1"
          name="svelte-demo-ebtn-t"
          value="ebtn-t1"
          appearance="button"
          emphasis="tertiary"
          bind:group={tertiaryGroup}
        >
          Option 1
        </Radio>
        <Radio
          id="svelte-demo-ebtn-t2"
          name="svelte-demo-ebtn-t"
          value="ebtn-t2"
          appearance="button"
          emphasis="tertiary"
          bind:group={tertiaryGroup}
        >
          Option 2
        </Radio>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="svelte-demo-ebtn-tn1"
          name="svelte-demo-ebtn-tn"
          value="ebtn-tn1"
          appearance="button"
          emphasis="tertiary"
          tone="neutral"
          bind:group={tertiaryNeutralGroup}
        >
          Neutral 1
        </Radio>
        <Radio
          id="svelte-demo-ebtn-tn2"
          name="svelte-demo-ebtn-tn"
          value="ebtn-tn2"
          appearance="button"
          emphasis="tertiary"
          tone="neutral"
          bind:group={tertiaryNeutralGroup}
        >
          Neutral 2
        </Radio>
      </div>
    </div>
  </div>

  <div>
    <h3>Secondary + tone</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="svelte-demo-ebtn-fbn"
        name="svelte-demo-ebtn-fb"
        value="ebtn-fbn"
        appearance="button"
        emphasis="secondary"
        tone="neutral"
        bind:group={feedbackGroup}
      >
        Neutral
      </Radio>
      <Radio
        id="svelte-demo-ebtn-fbd"
        name="svelte-demo-ebtn-fb"
        value="ebtn-fbd"
        appearance="button"
        emphasis="secondary"
        tone="danger"
        bind:group={feedbackGroup}
      >
        Danger
      </Radio>
      <Radio
        id="svelte-demo-ebtn-fbw"
        name="svelte-demo-ebtn-fb"
        value="ebtn-fbw"
        appearance="button"
        emphasis="secondary"
        tone="warning"
        bind:group={feedbackGroup}
      >
        Warning
      </Radio>
      <Radio
        id="svelte-demo-ebtn-fbs"
        name="svelte-demo-ebtn-fb"
        value="ebtn-fbs"
        appearance="button"
        emphasis="secondary"
        tone="success"
        bind:group={feedbackGroup}
      >
        Success
      </Radio>
    </div>
  </div>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/radio/emphasis.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";

const primaryGroup = ref("ebtn-p1");
const primaryNeutralGroup = ref("ebtn-pn1");
const secondaryGroup = ref("ebtn-s1");
const secondaryNeutralGroup = ref("ebtn-sn1");
const tertiaryGroup = ref("ebtn-t1");
const tertiaryNeutralGroup = ref("ebtn-tn1");
const feedbackGroup = ref("ebtn-fbn");
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <div>
      <h3>Primary (default)</h3>
      <div :class="stack({ gap: 'lg', direction: 'row' })">
        <div :class="stack({ gap: 'sm', direction: 'row' })">
          <Radio
            id="vue-demo-ebtn-p1"
            name="vue-demo-ebtn-p"
            value="ebtn-p1"
            appearance="button"
            :checked="primaryGroup === 'ebtn-p1'"
            :onChange="() => (primaryGroup = 'ebtn-p1')"
          >
            Option 1
          </Radio>
          <Radio
            id="vue-demo-ebtn-p2"
            name="vue-demo-ebtn-p"
            value="ebtn-p2"
            appearance="button"
            :checked="primaryGroup === 'ebtn-p2'"
            :onChange="() => (primaryGroup = 'ebtn-p2')"
          >
            Option 2
          </Radio>
        </div>
        <div :class="stack({ gap: 'sm', direction: 'row' })">
          <Radio
            id="vue-demo-ebtn-pn1"
            name="vue-demo-ebtn-pn"
            value="ebtn-pn1"
            appearance="button"
            tone="neutral"
            :checked="primaryNeutralGroup === 'ebtn-pn1'"
            :onChange="() => (primaryNeutralGroup = 'ebtn-pn1')"
          >
            Neutral 1
          </Radio>
          <Radio
            id="vue-demo-ebtn-pn2"
            name="vue-demo-ebtn-pn"
            value="ebtn-pn2"
            appearance="button"
            tone="neutral"
            :checked="primaryNeutralGroup === 'ebtn-pn2'"
            :onChange="() => (primaryNeutralGroup = 'ebtn-pn2')"
          >
            Neutral 2
          </Radio>
        </div>
      </div>
    </div>

    <div>
      <h3>Secondary</h3>
      <div :class="stack({ gap: 'lg', direction: 'row' })">
        <div :class="stack({ gap: 'sm', direction: 'row' })">
          <Radio
            id="vue-demo-ebtn-s1"
            name="vue-demo-ebtn-s"
            value="ebtn-s1"
            appearance="button"
            emphasis="secondary"
            :checked="secondaryGroup === 'ebtn-s1'"
            :onChange="() => (secondaryGroup = 'ebtn-s1')"
          >
            Option 1
          </Radio>
          <Radio
            id="vue-demo-ebtn-s2"
            name="vue-demo-ebtn-s"
            value="ebtn-s2"
            appearance="button"
            emphasis="secondary"
            :checked="secondaryGroup === 'ebtn-s2'"
            :onChange="() => (secondaryGroup = 'ebtn-s2')"
          >
            Option 2
          </Radio>
        </div>
        <div :class="stack({ gap: 'sm', direction: 'row' })">
          <Radio
            id="vue-demo-ebtn-sn1"
            name="vue-demo-ebtn-sn"
            value="ebtn-sn1"
            appearance="button"
            emphasis="secondary"
            tone="neutral"
            :checked="secondaryNeutralGroup === 'ebtn-sn1'"
            :onChange="() => (secondaryNeutralGroup = 'ebtn-sn1')"
          >
            Neutral 1
          </Radio>
          <Radio
            id="vue-demo-ebtn-sn2"
            name="vue-demo-ebtn-sn"
            value="ebtn-sn2"
            appearance="button"
            emphasis="secondary"
            tone="neutral"
            :checked="secondaryNeutralGroup === 'ebtn-sn2'"
            :onChange="() => (secondaryNeutralGroup = 'ebtn-sn2')"
          >
            Neutral 2
          </Radio>
        </div>
      </div>
    </div>

    <div>
      <h3>Tertiary</h3>
      <div :class="stack({ gap: 'lg', direction: 'row' })">
        <div :class="stack({ gap: 'sm', direction: 'row' })">
          <Radio
            id="vue-demo-ebtn-t1"
            name="vue-demo-ebtn-t"
            value="ebtn-t1"
            appearance="button"
            emphasis="tertiary"
            :checked="tertiaryGroup === 'ebtn-t1'"
            :onChange="() => (tertiaryGroup = 'ebtn-t1')"
          >
            Option 1
          </Radio>
          <Radio
            id="vue-demo-ebtn-t2"
            name="vue-demo-ebtn-t"
            value="ebtn-t2"
            appearance="button"
            emphasis="tertiary"
            :checked="tertiaryGroup === 'ebtn-t2'"
            :onChange="() => (tertiaryGroup = 'ebtn-t2')"
          >
            Option 2
          </Radio>
        </div>
        <div :class="stack({ gap: 'sm', direction: 'row' })">
          <Radio
            id="vue-demo-ebtn-tn1"
            name="vue-demo-ebtn-tn"
            value="ebtn-tn1"
            appearance="button"
            emphasis="tertiary"
            tone="neutral"
            :checked="tertiaryNeutralGroup === 'ebtn-tn1'"
            :onChange="() => (tertiaryNeutralGroup = 'ebtn-tn1')"
          >
            Neutral 1
          </Radio>
          <Radio
            id="vue-demo-ebtn-tn2"
            name="vue-demo-ebtn-tn"
            value="ebtn-tn2"
            appearance="button"
            emphasis="tertiary"
            tone="neutral"
            :checked="tertiaryNeutralGroup === 'ebtn-tn2'"
            :onChange="() => (tertiaryNeutralGroup = 'ebtn-tn2')"
          >
            Neutral 2
          </Radio>
        </div>
      </div>
    </div>

    <div>
      <h3>Secondary + tone</h3>
      <div :class="stack({ gap: 'sm', direction: 'row' })">
        <Radio
          id="vue-demo-ebtn-fbn"
          name="vue-demo-ebtn-fb"
          value="ebtn-fbn"
          appearance="button"
          emphasis="secondary"
          tone="neutral"
          :checked="feedbackGroup === 'ebtn-fbn'"
          :onChange="() => (feedbackGroup = 'ebtn-fbn')"
        >
          Neutral
        </Radio>
        <Radio
          id="vue-demo-ebtn-fbd"
          name="vue-demo-ebtn-fb"
          value="ebtn-fbd"
          appearance="button"
          emphasis="secondary"
          tone="danger"
          :checked="feedbackGroup === 'ebtn-fbd'"
          :onChange="() => (feedbackGroup = 'ebtn-fbd')"
        >
          Danger
        </Radio>
        <Radio
          id="vue-demo-ebtn-fbw"
          name="vue-demo-ebtn-fb"
          value="ebtn-fbw"
          appearance="button"
          emphasis="secondary"
          tone="warning"
          :checked="feedbackGroup === 'ebtn-fbw'"
          :onChange="() => (feedbackGroup = 'ebtn-fbw')"
        >
          Warning
        </Radio>
        <Radio
          id="vue-demo-ebtn-fbs"
          name="vue-demo-ebtn-fb"
          value="ebtn-fbs"
          appearance="button"
          emphasis="secondary"
          tone="success"
          :checked="feedbackGroup === 'ebtn-fbs'"
          :onChange="() => (feedbackGroup = 'ebtn-fbs')"
        >
          Success
        </Radio>
      </div>
    </div>
  </div>
</template>

// GENERATED from packages/demos/radio/emphasis.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Radio } from "@pindoba/solid-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function EmphasisDemo() {
  const [primaryGroup, setPrimaryGroup] = createSignal("ebtn-p1");
  const [primaryNeutralGroup, setPrimaryNeutralGroup] =
    createSignal("ebtn-pn1");
  const [secondaryGroup, setSecondaryGroup] = createSignal("ebtn-s1");
  const [secondaryNeutralGroup, setSecondaryNeutralGroup] =
    createSignal("ebtn-sn1");
  const [tertiaryGroup, setTertiaryGroup] = createSignal("ebtn-t1");
  const [tertiaryNeutralGroup, setTertiaryNeutralGroup] =
    createSignal("ebtn-tn1");
  const [feedbackGroup, setFeedbackGroup] = createSignal("ebtn-fbn");
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Primary (default)</h3>
        <div class={stack({ gap: "lg", direction: "row" })}>
          <div class={stack({ gap: "sm", direction: "row" })}>
            <Radio
              id="solid-demo-ebtn-p1"
              name="solid-demo-ebtn-p"
              value="ebtn-p1"
              appearance="button"
              checked={primaryGroup() === "ebtn-p1"}
              onChange={() => setPrimaryGroup("ebtn-p1")}
            >
              Option 1
            </Radio>
            <Radio
              id="solid-demo-ebtn-p2"
              name="solid-demo-ebtn-p"
              value="ebtn-p2"
              appearance="button"
              checked={primaryGroup() === "ebtn-p2"}
              onChange={() => setPrimaryGroup("ebtn-p2")}
            >
              Option 2
            </Radio>
          </div>
          <div class={stack({ gap: "sm", direction: "row" })}>
            <Radio
              id="solid-demo-ebtn-pn1"
              name="solid-demo-ebtn-pn"
              value="ebtn-pn1"
              appearance="button"
              tone="neutral"
              checked={primaryNeutralGroup() === "ebtn-pn1"}
              onChange={() => setPrimaryNeutralGroup("ebtn-pn1")}
            >
              Neutral 1
            </Radio>
            <Radio
              id="solid-demo-ebtn-pn2"
              name="solid-demo-ebtn-pn"
              value="ebtn-pn2"
              appearance="button"
              tone="neutral"
              checked={primaryNeutralGroup() === "ebtn-pn2"}
              onChange={() => setPrimaryNeutralGroup("ebtn-pn2")}
            >
              Neutral 2
            </Radio>
          </div>
        </div>
      </div>

      <div>
        <h3>Secondary</h3>
        <div class={stack({ gap: "lg", direction: "row" })}>
          <div class={stack({ gap: "sm", direction: "row" })}>
            <Radio
              id="solid-demo-ebtn-s1"
              name="solid-demo-ebtn-s"
              value="ebtn-s1"
              appearance="button"
              emphasis="secondary"
              checked={secondaryGroup() === "ebtn-s1"}
              onChange={() => setSecondaryGroup("ebtn-s1")}
            >
              Option 1
            </Radio>
            <Radio
              id="solid-demo-ebtn-s2"
              name="solid-demo-ebtn-s"
              value="ebtn-s2"
              appearance="button"
              emphasis="secondary"
              checked={secondaryGroup() === "ebtn-s2"}
              onChange={() => setSecondaryGroup("ebtn-s2")}
            >
              Option 2
            </Radio>
          </div>
          <div class={stack({ gap: "sm", direction: "row" })}>
            <Radio
              id="solid-demo-ebtn-sn1"
              name="solid-demo-ebtn-sn"
              value="ebtn-sn1"
              appearance="button"
              emphasis="secondary"
              tone="neutral"
              checked={secondaryNeutralGroup() === "ebtn-sn1"}
              onChange={() => setSecondaryNeutralGroup("ebtn-sn1")}
            >
              Neutral 1
            </Radio>
            <Radio
              id="solid-demo-ebtn-sn2"
              name="solid-demo-ebtn-sn"
              value="ebtn-sn2"
              appearance="button"
              emphasis="secondary"
              tone="neutral"
              checked={secondaryNeutralGroup() === "ebtn-sn2"}
              onChange={() => setSecondaryNeutralGroup("ebtn-sn2")}
            >
              Neutral 2
            </Radio>
          </div>
        </div>
      </div>

      <div>
        <h3>Tertiary</h3>
        <div class={stack({ gap: "lg", direction: "row" })}>
          <div class={stack({ gap: "sm", direction: "row" })}>
            <Radio
              id="solid-demo-ebtn-t1"
              name="solid-demo-ebtn-t"
              value="ebtn-t1"
              appearance="button"
              emphasis="tertiary"
              checked={tertiaryGroup() === "ebtn-t1"}
              onChange={() => setTertiaryGroup("ebtn-t1")}
            >
              Option 1
            </Radio>
            <Radio
              id="solid-demo-ebtn-t2"
              name="solid-demo-ebtn-t"
              value="ebtn-t2"
              appearance="button"
              emphasis="tertiary"
              checked={tertiaryGroup() === "ebtn-t2"}
              onChange={() => setTertiaryGroup("ebtn-t2")}
            >
              Option 2
            </Radio>
          </div>
          <div class={stack({ gap: "sm", direction: "row" })}>
            <Radio
              id="solid-demo-ebtn-tn1"
              name="solid-demo-ebtn-tn"
              value="ebtn-tn1"
              appearance="button"
              emphasis="tertiary"
              tone="neutral"
              checked={tertiaryNeutralGroup() === "ebtn-tn1"}
              onChange={() => setTertiaryNeutralGroup("ebtn-tn1")}
            >
              Neutral 1
            </Radio>
            <Radio
              id="solid-demo-ebtn-tn2"
              name="solid-demo-ebtn-tn"
              value="ebtn-tn2"
              appearance="button"
              emphasis="tertiary"
              tone="neutral"
              checked={tertiaryNeutralGroup() === "ebtn-tn2"}
              onChange={() => setTertiaryNeutralGroup("ebtn-tn2")}
            >
              Neutral 2
            </Radio>
          </div>
        </div>
      </div>

      <div>
        <h3>Secondary + tone</h3>
        <div class={stack({ gap: "sm", direction: "row" })}>
          <Radio
            id="solid-demo-ebtn-fbn"
            name="solid-demo-ebtn-fb"
            value="ebtn-fbn"
            appearance="button"
            emphasis="secondary"
            tone="neutral"
            checked={feedbackGroup() === "ebtn-fbn"}
            onChange={() => setFeedbackGroup("ebtn-fbn")}
          >
            Neutral
          </Radio>
          <Radio
            id="solid-demo-ebtn-fbd"
            name="solid-demo-ebtn-fb"
            value="ebtn-fbd"
            appearance="button"
            emphasis="secondary"
            tone="danger"
            checked={feedbackGroup() === "ebtn-fbd"}
            onChange={() => setFeedbackGroup("ebtn-fbd")}
          >
            Danger
          </Radio>
          <Radio
            id="solid-demo-ebtn-fbw"
            name="solid-demo-ebtn-fb"
            value="ebtn-fbw"
            appearance="button"
            emphasis="secondary"
            tone="warning"
            checked={feedbackGroup() === "ebtn-fbw"}
            onChange={() => setFeedbackGroup("ebtn-fbw")}
          >
            Warning
          </Radio>
          <Radio
            id="solid-demo-ebtn-fbs"
            name="solid-demo-ebtn-fb"
            value="ebtn-fbs"
            appearance="button"
            emphasis="secondary"
            tone="success"
            checked={feedbackGroup() === "ebtn-fbs"}
            onChange={() => setFeedbackGroup("ebtn-fbs")}
          >
            Success
          </Radio>
        </div>
      </div>
    </div>
  );
}

Tab

appearance="tab" renders a minimal underline tab: transparent surface and a 2px inset accent bar on the checked item. orientation picks the bar edge — "horizontal" (default, bottom edge) or "vertical" (inline-start edge). Use tone to change the accent color. Wrap tabs in a Group to get the 1px baseline track drawn for you, plus a selection bar that slides between tabs (CSS anchor positioning; without it, each tab keeps its own static bar). Navigation and Tab build their strips on this same appearance.

Tab rows are sized control rows on the Control Var Contract, like the button appearance: leading/trailing content (a <Stamp> icon, a <Badge> count) sizes itself to the row metrics. Tabs are transparent by default with the size-derived control radius on the free corners; pass background (a neutral surface token, e.g. "surface.peak") for an opt-in resting fill, and radius to retune or square the corners — hover, press, and the checked state keep moving only the bar and text, and the bar-edge corners always stay square so the accent bar sits seated on the track.

PreviewCode

---
// GENERATED from packages/demos/radio/tab.demo.tsx — edit the source, not this file.
import Radio from "@pindoba/astro-radio";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { GitBranch, Trash } from "@lucide/astro";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const hTrack = `${stack({ gap: "sm", direction: "row" })} ${css({
  boxShadow: "0 -1px 0 0 token(colors.neutral.border) inset",
})}`;
const vTrack = `${stack({ gap: "xs", direction: "column" })} ${css({
  boxShadow: "1px 0 0 0 token(colors.neutral.border) inset",
  width: "max-content",
})}`;
---

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

  <div>
    <h3>Tab — Vertical orientation</h3>
    <div class={vTrack}>
      <Radio
        id="astro-demo-tab-v1"
        name="astro-demo-tab-v"
        value="tab-v1"
        appearance="tab"
        orientation="vertical"
        checked
      >
        Dashboard
      </Radio>
      <Radio
        id="astro-demo-tab-v2"
        name="astro-demo-tab-v"
        value="tab-v2"
        appearance="tab"
        orientation="vertical"
      >
        Settings
      </Radio>
      <Radio
        id="astro-demo-tab-v3"
        name="astro-demo-tab-v"
        value="tab-v3"
        appearance="tab"
        orientation="vertical"
      >
        Profile
      </Radio>
    </div>
  </div>

  <div>
    <h3>Tab — Danger tone</h3>
    <div class={hTrack}>
      <Radio
        id="astro-demo-tab-hd1"
        name="astro-demo-tab-hd"
        value="tab-hd1"
        appearance="tab"
        tone="danger"
        checked
      >
        Errors
      </Radio>
      <Radio
        id="astro-demo-tab-hd2"
        name="astro-demo-tab-hd"
        value="tab-hd2"
        appearance="tab"
        tone="danger"
      >
        Warnings
      </Radio>
    </div>
  </div>

  <div>
    <h3>Tab — Background</h3>
    <div class={hTrack}>
      <Radio
        id="astro-demo-tab-b1"
        name="astro-demo-tab-bg"
        value="tab-b1"
        appearance="tab"
        background="surface.peak"
        checked
      >
        Inbox
      </Radio>
      <Radio
        id="astro-demo-tab-b2"
        name="astro-demo-tab-bg"
        value="tab-b2"
        appearance="tab"
        background="surface.peak"
      >
        Archive
      </Radio>
    </div>
  </div>

  <div>
    <h3>Tab — Leading and trailing slots</h3>
    <div class={hTrack}>
      <Radio
        id="astro-demo-tab-s1"
        name="astro-demo-tab-slots"
        value="tab-s1"
        appearance="tab"
        checked
      >
        <Stamp slot="leading" emphasis="ghost">
          <GitBranch />
        </Stamp>
        <Badge slot="trailing" size="sm">
          221
        </Badge>
        Active
      </Radio>
      <Radio
        id="astro-demo-tab-s2"
        name="astro-demo-tab-slots"
        value="tab-s2"
        appearance="tab"
        tone="danger"
      >
        <Stamp slot="leading" emphasis="ghost">
          <Trash />
        </Stamp>
        <Badge slot="trailing" size="sm" tone="danger">
          0
        </Badge>
        Deleted
      </Radio>
    </div>
  </div>
</div>

// GENERATED from packages/demos/radio/tab.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Radio } from "@pindoba/react-radio";
import { Badge } from "@pindoba/react-badge";
import { Stamp } from "@pindoba/react-stamp";
import { GitBranch } from "lucide-react";
import { Trash } from "lucide-react";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const hTrack = `${stack({ gap: "sm", direction: "row" })} ${css({
  boxShadow: "0 -1px 0 0 token(colors.neutral.border) inset",
})}`;
const vTrack = `${stack({ gap: "xs", direction: "column" })} ${css({
  boxShadow: "1px 0 0 0 token(colors.neutral.border) inset",
  width: "max-content",
})}`;
export default function TabDemo() {
  const [tabHGroup, setTabHGroup] = useState("tab-h1");
  const [tabVGroup, setTabVGroup] = useState("tab-v1");
  const [tabHDanger, setTabHDanger] = useState("tab-hd1");
  const [tabSlots, setTabSlots] = useState("tab-s1");
  const [tabBg, setTabBg] = useState("tab-b1");
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Tab</h3>
        <div className={hTrack}>
          <Radio
            id="react-demo-tab-h1"
            name="react-demo-tab-h"
            value="tab-h1"
            appearance="tab"
            checked={tabHGroup === "tab-h1"}
            onChange={() => setTabHGroup("tab-h1")}
          >
            All
          </Radio>
          <Radio
            id="react-demo-tab-h2"
            name="react-demo-tab-h"
            value="tab-h2"
            appearance="tab"
            checked={tabHGroup === "tab-h2"}
            onChange={() => setTabHGroup("tab-h2")}
          >
            Active
          </Radio>
          <Radio
            id="react-demo-tab-h3"
            name="react-demo-tab-h"
            value="tab-h3"
            appearance="tab"
            checked={tabHGroup === "tab-h3"}
            onChange={() => setTabHGroup("tab-h3")}
          >
            Archived
          </Radio>
        </div>
      </div>

      <div>
        <h3>Tab — Vertical orientation</h3>
        <div className={vTrack}>
          <Radio
            id="react-demo-tab-v1"
            name="react-demo-tab-v"
            value="tab-v1"
            appearance="tab"
            orientation="vertical"
            checked={tabVGroup === "tab-v1"}
            onChange={() => setTabVGroup("tab-v1")}
          >
            Dashboard
          </Radio>
          <Radio
            id="react-demo-tab-v2"
            name="react-demo-tab-v"
            value="tab-v2"
            appearance="tab"
            orientation="vertical"
            checked={tabVGroup === "tab-v2"}
            onChange={() => setTabVGroup("tab-v2")}
          >
            Settings
          </Radio>
          <Radio
            id="react-demo-tab-v3"
            name="react-demo-tab-v"
            value="tab-v3"
            appearance="tab"
            orientation="vertical"
            checked={tabVGroup === "tab-v3"}
            onChange={() => setTabVGroup("tab-v3")}
          >
            Profile
          </Radio>
        </div>
      </div>

      <div>
        <h3>Tab — Danger tone</h3>
        <div className={hTrack}>
          <Radio
            id="react-demo-tab-hd1"
            name="react-demo-tab-hd"
            value="tab-hd1"
            appearance="tab"
            tone="danger"
            checked={tabHDanger === "tab-hd1"}
            onChange={() => setTabHDanger("tab-hd1")}
          >
            Errors
          </Radio>
          <Radio
            id="react-demo-tab-hd2"
            name="react-demo-tab-hd"
            value="tab-hd2"
            appearance="tab"
            tone="danger"
            checked={tabHDanger === "tab-hd2"}
            onChange={() => setTabHDanger("tab-hd2")}
          >
            Warnings
          </Radio>
        </div>
      </div>

      <div>
        <h3>Tab — Background</h3>
        <div className={hTrack}>
          <Radio
            id="react-demo-tab-b1"
            name="react-demo-tab-bg"
            value="tab-b1"
            appearance="tab"
            background="surface.peak"
            checked={tabBg === "tab-b1"}
            onChange={() => setTabBg("tab-b1")}
          >
            Inbox
          </Radio>
          <Radio
            id="react-demo-tab-b2"
            name="react-demo-tab-bg"
            value="tab-b2"
            appearance="tab"
            background="surface.peak"
            checked={tabBg === "tab-b2"}
            onChange={() => setTabBg("tab-b2")}
          >
            Archive
          </Radio>
        </div>
      </div>

      <div>
        <h3>Tab — Leading and trailing slots</h3>
        <div className={hTrack}>
          <Radio
            id="react-demo-tab-s1"
            name="react-demo-tab-slots"
            value="tab-s1"
            appearance="tab"
            checked={tabSlots === "tab-s1"}
            onChange={() => setTabSlots("tab-s1")}
            leading={
              <Stamp emphasis="ghost">
                <GitBranch />
              </Stamp>
            }
            trailing={<Badge size="sm">221</Badge>}
          >
            Active
          </Radio>
          <Radio
            id="react-demo-tab-s2"
            name="react-demo-tab-slots"
            value="tab-s2"
            appearance="tab"
            tone="danger"
            checked={tabSlots === "tab-s2"}
            onChange={() => setTabSlots("tab-s2")}
            leading={
              <Stamp emphasis="ghost">
                <Trash />
              </Stamp>
            }
            trailing={
              <Badge size="sm" tone="danger">
                0
              </Badge>
            }
          >
            Deleted
          </Radio>
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/radio/tab.demo.tsx — edit the source, not this file.
  import Radio from "@pindoba/svelte-radio";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideGitBranch from "@lucide/svelte/icons/git-branch";
  import LucideTrash from "@lucide/svelte/icons/trash";
  import { css } from "@pindoba/styled-system/css";
  import { stack } from "@pindoba/styled-system/patterns";

  const hTrack = `${stack({ gap: "sm", direction: "row" })} ${css({
    boxShadow: "0 -1px 0 0 token(colors.neutral.border) inset",
  })}`;
  const vTrack = `${stack({ gap: "xs", direction: "column" })} ${css({
    boxShadow: "1px 0 0 0 token(colors.neutral.border) inset",
    width: "max-content",
  })}`;

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

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

  <div>
    <h3>Tab — Vertical orientation</h3>
    <div class={vTrack}>
      <Radio
        id="svelte-demo-tab-v1"
        name="svelte-demo-tab-v"
        value="tab-v1"
        appearance="tab"
        orientation="vertical"
        bind:group={tabVGroup}
      >
        Dashboard
      </Radio>
      <Radio
        id="svelte-demo-tab-v2"
        name="svelte-demo-tab-v"
        value="tab-v2"
        appearance="tab"
        orientation="vertical"
        bind:group={tabVGroup}
      >
        Settings
      </Radio>
      <Radio
        id="svelte-demo-tab-v3"
        name="svelte-demo-tab-v"
        value="tab-v3"
        appearance="tab"
        orientation="vertical"
        bind:group={tabVGroup}
      >
        Profile
      </Radio>
    </div>
  </div>

  <div>
    <h3>Tab — Danger tone</h3>
    <div class={hTrack}>
      <Radio
        id="svelte-demo-tab-hd1"
        name="svelte-demo-tab-hd"
        value="tab-hd1"
        appearance="tab"
        tone="danger"
        bind:group={tabHDanger}
      >
        Errors
      </Radio>
      <Radio
        id="svelte-demo-tab-hd2"
        name="svelte-demo-tab-hd"
        value="tab-hd2"
        appearance="tab"
        tone="danger"
        bind:group={tabHDanger}
      >
        Warnings
      </Radio>
    </div>
  </div>

  <div>
    <h3>Tab — Background</h3>
    <div class={hTrack}>
      <Radio
        id="svelte-demo-tab-b1"
        name="svelte-demo-tab-bg"
        value="tab-b1"
        appearance="tab"
        background="surface.peak"
        bind:group={tabBg}
      >
        Inbox
      </Radio>
      <Radio
        id="svelte-demo-tab-b2"
        name="svelte-demo-tab-bg"
        value="tab-b2"
        appearance="tab"
        background="surface.peak"
        bind:group={tabBg}
      >
        Archive
      </Radio>
    </div>
  </div>

  <div>
    <h3>Tab — Leading and trailing slots</h3>
    <div class={hTrack}>
      <Radio
        id="svelte-demo-tab-s1"
        name="svelte-demo-tab-slots"
        value="tab-s1"
        appearance="tab"
        bind:group={tabSlots}
      >
        {#snippet leading()}
          <Stamp emphasis="ghost">
            <LucideGitBranch />
          </Stamp>
        {/snippet}
        {#snippet trailing()}
          <Badge size="sm">221</Badge>
        {/snippet}
        Active
      </Radio>
      <Radio
        id="svelte-demo-tab-s2"
        name="svelte-demo-tab-slots"
        value="tab-s2"
        appearance="tab"
        tone="danger"
        bind:group={tabSlots}
      >
        {#snippet leading()}
          <Stamp emphasis="ghost">
            <LucideTrash />
          </Stamp>
        {/snippet}
        {#snippet trailing()}
          <Badge size="sm" tone="danger">0</Badge>
        {/snippet}
        Deleted
      </Radio>
    </div>
  </div>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/radio/tab.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const hTrack = `${stack({ gap: "sm", direction: "row" })} ${css({
  boxShadow: "0 -1px 0 0 token(colors.neutral.border) inset",
})}`;
const vTrack = `${stack({ gap: "xs", direction: "column" })} ${css({
  boxShadow: "1px 0 0 0 token(colors.neutral.border) inset",
  width: "max-content",
})}`;

const tabHGroup = ref("tab-h1");
const tabVGroup = ref("tab-v1");
const tabHDanger = ref("tab-hd1");
const tabSlots = ref("tab-s1");
const tabBg = ref("tab-b1");
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <div>
      <h3>Tab</h3>
      <div :class="hTrack">
        <Radio
          id="vue-demo-tab-h1"
          name="vue-demo-tab-h"
          value="tab-h1"
          appearance="tab"
          :checked="tabHGroup === 'tab-h1'"
          :onChange="() => (tabHGroup = 'tab-h1')"
        >
          All
        </Radio>
        <Radio
          id="vue-demo-tab-h2"
          name="vue-demo-tab-h"
          value="tab-h2"
          appearance="tab"
          :checked="tabHGroup === 'tab-h2'"
          :onChange="() => (tabHGroup = 'tab-h2')"
        >
          Active
        </Radio>
        <Radio
          id="vue-demo-tab-h3"
          name="vue-demo-tab-h"
          value="tab-h3"
          appearance="tab"
          :checked="tabHGroup === 'tab-h3'"
          :onChange="() => (tabHGroup = 'tab-h3')"
        >
          Archived
        </Radio>
      </div>
    </div>

    <div>
      <h3>Tab — Vertical orientation</h3>
      <div :class="vTrack">
        <Radio
          id="vue-demo-tab-v1"
          name="vue-demo-tab-v"
          value="tab-v1"
          appearance="tab"
          orientation="vertical"
          :checked="tabVGroup === 'tab-v1'"
          :onChange="() => (tabVGroup = 'tab-v1')"
        >
          Dashboard
        </Radio>
        <Radio
          id="vue-demo-tab-v2"
          name="vue-demo-tab-v"
          value="tab-v2"
          appearance="tab"
          orientation="vertical"
          :checked="tabVGroup === 'tab-v2'"
          :onChange="() => (tabVGroup = 'tab-v2')"
        >
          Settings
        </Radio>
        <Radio
          id="vue-demo-tab-v3"
          name="vue-demo-tab-v"
          value="tab-v3"
          appearance="tab"
          orientation="vertical"
          :checked="tabVGroup === 'tab-v3'"
          :onChange="() => (tabVGroup = 'tab-v3')"
        >
          Profile
        </Radio>
      </div>
    </div>

    <div>
      <h3>Tab — Danger tone</h3>
      <div :class="hTrack">
        <Radio
          id="vue-demo-tab-hd1"
          name="vue-demo-tab-hd"
          value="tab-hd1"
          appearance="tab"
          tone="danger"
          :checked="tabHDanger === 'tab-hd1'"
          :onChange="() => (tabHDanger = 'tab-hd1')"
        >
          Errors
        </Radio>
        <Radio
          id="vue-demo-tab-hd2"
          name="vue-demo-tab-hd"
          value="tab-hd2"
          appearance="tab"
          tone="danger"
          :checked="tabHDanger === 'tab-hd2'"
          :onChange="() => (tabHDanger = 'tab-hd2')"
        >
          Warnings
        </Radio>
      </div>
    </div>

    <div>
      <h3>Tab — Background</h3>
      <div :class="hTrack">
        <Radio
          id="vue-demo-tab-b1"
          name="vue-demo-tab-bg"
          value="tab-b1"
          appearance="tab"
          background="surface.peak"
          :checked="tabBg === 'tab-b1'"
          :onChange="() => (tabBg = 'tab-b1')"
        >
          Inbox
        </Radio>
        <Radio
          id="vue-demo-tab-b2"
          name="vue-demo-tab-bg"
          value="tab-b2"
          appearance="tab"
          background="surface.peak"
          :checked="tabBg === 'tab-b2'"
          :onChange="() => (tabBg = 'tab-b2')"
        >
          Archive
        </Radio>
      </div>
    </div>

    <div>
      <h3>Tab — Leading and trailing slots</h3>
      <div :class="hTrack">
        <Radio
          id="vue-demo-tab-s1"
          name="vue-demo-tab-slots"
          value="tab-s1"
          appearance="tab"
          :checked="tabSlots === 'tab-s1'"
          :onChange="() => (tabSlots = 'tab-s1')"
        >
          <template #leading>
            <Stamp emphasis="ghost">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-git-branch"
                aria-hidden="true"
              >
                <path d="M15 6a9 9 0 0 0-9 9V3" />
                <circle cx="18" cy="6" r="3" />
                <circle cx="6" cy="18" r="3" />
              </svg>
            </Stamp>
          </template>
          <template #trailing>
            <Badge size="sm">221</Badge>
          </template>
          Active
        </Radio>
        <Radio
          id="vue-demo-tab-s2"
          name="vue-demo-tab-slots"
          value="tab-s2"
          appearance="tab"
          tone="danger"
          :checked="tabSlots === 'tab-s2'"
          :onChange="() => (tabSlots = 'tab-s2')"
        >
          <template #leading>
            <Stamp emphasis="ghost">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-trash"
                aria-hidden="true"
              >
                <path d="M10 11v6" />
                <path d="M14 11v6" />
                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
                <path d="M3 6h18" />
                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
              </svg>
            </Stamp>
          </template>
          <template #trailing>
            <Badge size="sm" tone="danger">0</Badge>
          </template>
          Deleted
        </Radio>
      </div>
    </div>
  </div>
</template>

// GENERATED from packages/demos/radio/tab.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Radio } from "@pindoba/solid-radio";
import { Badge } from "@pindoba/solid-badge";
import { Stamp } from "@pindoba/solid-stamp";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const hTrack = `${stack({ gap: "sm", direction: "row" })} ${css({
  boxShadow: "0 -1px 0 0 token(colors.neutral.border) inset",
})}`;
const vTrack = `${stack({ gap: "xs", direction: "column" })} ${css({
  boxShadow: "1px 0 0 0 token(colors.neutral.border) inset",
  width: "max-content",
})}`;
export default function TabDemo() {
  const [tabHGroup, setTabHGroup] = createSignal("tab-h1");
  const [tabVGroup, setTabVGroup] = createSignal("tab-v1");
  const [tabHDanger, setTabHDanger] = createSignal("tab-hd1");
  const [tabSlots, setTabSlots] = createSignal("tab-s1");
  const [tabBg, setTabBg] = createSignal("tab-b1");
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Tab</h3>
        <div class={hTrack}>
          <Radio
            id="solid-demo-tab-h1"
            name="solid-demo-tab-h"
            value="tab-h1"
            appearance="tab"
            checked={tabHGroup() === "tab-h1"}
            onChange={() => setTabHGroup("tab-h1")}
          >
            All
          </Radio>
          <Radio
            id="solid-demo-tab-h2"
            name="solid-demo-tab-h"
            value="tab-h2"
            appearance="tab"
            checked={tabHGroup() === "tab-h2"}
            onChange={() => setTabHGroup("tab-h2")}
          >
            Active
          </Radio>
          <Radio
            id="solid-demo-tab-h3"
            name="solid-demo-tab-h"
            value="tab-h3"
            appearance="tab"
            checked={tabHGroup() === "tab-h3"}
            onChange={() => setTabHGroup("tab-h3")}
          >
            Archived
          </Radio>
        </div>
      </div>

      <div>
        <h3>Tab — Vertical orientation</h3>
        <div class={vTrack}>
          <Radio
            id="solid-demo-tab-v1"
            name="solid-demo-tab-v"
            value="tab-v1"
            appearance="tab"
            orientation="vertical"
            checked={tabVGroup() === "tab-v1"}
            onChange={() => setTabVGroup("tab-v1")}
          >
            Dashboard
          </Radio>
          <Radio
            id="solid-demo-tab-v2"
            name="solid-demo-tab-v"
            value="tab-v2"
            appearance="tab"
            orientation="vertical"
            checked={tabVGroup() === "tab-v2"}
            onChange={() => setTabVGroup("tab-v2")}
          >
            Settings
          </Radio>
          <Radio
            id="solid-demo-tab-v3"
            name="solid-demo-tab-v"
            value="tab-v3"
            appearance="tab"
            orientation="vertical"
            checked={tabVGroup() === "tab-v3"}
            onChange={() => setTabVGroup("tab-v3")}
          >
            Profile
          </Radio>
        </div>
      </div>

      <div>
        <h3>Tab — Danger tone</h3>
        <div class={hTrack}>
          <Radio
            id="solid-demo-tab-hd1"
            name="solid-demo-tab-hd"
            value="tab-hd1"
            appearance="tab"
            tone="danger"
            checked={tabHDanger() === "tab-hd1"}
            onChange={() => setTabHDanger("tab-hd1")}
          >
            Errors
          </Radio>
          <Radio
            id="solid-demo-tab-hd2"
            name="solid-demo-tab-hd"
            value="tab-hd2"
            appearance="tab"
            tone="danger"
            checked={tabHDanger() === "tab-hd2"}
            onChange={() => setTabHDanger("tab-hd2")}
          >
            Warnings
          </Radio>
        </div>
      </div>

      <div>
        <h3>Tab — Background</h3>
        <div class={hTrack}>
          <Radio
            id="solid-demo-tab-b1"
            name="solid-demo-tab-bg"
            value="tab-b1"
            appearance="tab"
            background="surface.peak"
            checked={tabBg() === "tab-b1"}
            onChange={() => setTabBg("tab-b1")}
          >
            Inbox
          </Radio>
          <Radio
            id="solid-demo-tab-b2"
            name="solid-demo-tab-bg"
            value="tab-b2"
            appearance="tab"
            background="surface.peak"
            checked={tabBg() === "tab-b2"}
            onChange={() => setTabBg("tab-b2")}
          >
            Archive
          </Radio>
        </div>
      </div>

      <div>
        <h3>Tab — Leading and trailing slots</h3>
        <div class={hTrack}>
          <Radio
            id="solid-demo-tab-s1"
            name="solid-demo-tab-slots"
            value="tab-s1"
            appearance="tab"
            checked={tabSlots() === "tab-s1"}
            onChange={() => setTabSlots("tab-s1")}
            leading={
              <Stamp emphasis="ghost">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-git-branch"
                  aria-hidden="true"
                >
                  <path d="M15 6a9 9 0 0 0-9 9V3" />
                  <circle cx="18" cy="6" r="3" />
                  <circle cx="6" cy="18" r="3" />
                </svg>
              </Stamp>
            }
            trailing={<Badge size="sm">221</Badge>}
          >
            Active
          </Radio>
          <Radio
            id="solid-demo-tab-s2"
            name="solid-demo-tab-slots"
            value="tab-s2"
            appearance="tab"
            tone="danger"
            checked={tabSlots() === "tab-s2"}
            onChange={() => setTabSlots("tab-s2")}
            leading={
              <Stamp emphasis="ghost">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-trash"
                  aria-hidden="true"
                >
                  <path d="M10 11v6" />
                  <path d="M14 11v6" />
                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
                  <path d="M3 6h18" />
                  <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                </svg>
              </Stamp>
            }
            trailing={
              <Badge size="sm" tone="danger">
                0
              </Badge>
            }
          >
            Deleted
          </Radio>
        </div>
      </div>
    </div>
  );
}

With Badge

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

PreviewCode

radio appearance

Small 3 Medium 3 Large 3

button appearance

Small 3 Medium 3 Large 3

---
// GENERATED from packages/demos/radio/badge.demo.tsx — edit the source, not this file.
import Radio from "@pindoba/astro-radio";
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-demo-badge-radio-sm"
        name="astro-demo-badge-radio"
        value="badge-radio-sm"
        size="sm"
        checked
      >
        Small{" "}
        <Badge tone="primary" size="sm">
          3
        </Badge>
      </Radio>
      <Radio
        id="astro-demo-badge-radio-md"
        name="astro-demo-badge-radio"
        value="badge-radio-md"
        size="md"
      >
        Medium{" "}
        <Badge tone="primary" size="sm">
          3
        </Badge>
      </Radio>
      <Radio
        id="astro-demo-badge-radio-lg"
        name="astro-demo-badge-radio"
        value="badge-radio-lg"
        size="lg"
      >
        Large{" "}
        <Badge tone="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-demo-badge-btn-sm"
        name="astro-demo-badge-btn"
        value="badge-btn-sm"
        appearance="button"
        size="sm"
        checked
      >
        Small{" "}
        <Badge tone="primary" size="sm">
          3
        </Badge>
      </Radio>
      <Radio
        id="astro-demo-badge-btn-md"
        name="astro-demo-badge-btn"
        value="badge-btn-md"
        appearance="button"
        size="md"
      >
        Medium{" "}
        <Badge tone="primary" size="sm">
          3
        </Badge>
      </Radio>
      <Radio
        id="astro-demo-badge-btn-lg"
        name="astro-demo-badge-btn"
        value="badge-btn-lg"
        appearance="button"
        size="lg"
      >
        Large{" "}
        <Badge tone="primary" size="sm">
          3
        </Badge>
      </Radio>
    </div>
  </div>
</div>

// GENERATED from packages/demos/radio/badge.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Radio } from "@pindoba/react-radio";
import { Badge } from "@pindoba/react-badge";
import { stack } from "@pindoba/styled-system/patterns";

export default function BadgeDemo() {
  const [radioGroup, setRadioGroup] = useState("badge-radio-sm");
  const [buttonGroup, setButtonGroup] = useState("badge-btn-sm");
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>radio appearance</h3>
        <div
          className={stack({ gap: "sm", direction: "row", align: "center" })}
        >
          <Radio
            id="react-demo-badge-radio-sm"
            name="react-demo-badge-radio"
            value="badge-radio-sm"
            size="sm"
            checked={radioGroup === "badge-radio-sm"}
            onChange={() => setRadioGroup("badge-radio-sm")}
          >
            Small{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Radio>
          <Radio
            id="react-demo-badge-radio-md"
            name="react-demo-badge-radio"
            value="badge-radio-md"
            size="md"
            checked={radioGroup === "badge-radio-md"}
            onChange={() => setRadioGroup("badge-radio-md")}
          >
            Medium{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Radio>
          <Radio
            id="react-demo-badge-radio-lg"
            name="react-demo-badge-radio"
            value="badge-radio-lg"
            size="lg"
            checked={radioGroup === "badge-radio-lg"}
            onChange={() => setRadioGroup("badge-radio-lg")}
          >
            Large{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Radio>
        </div>
      </div>

      <div>
        <h3>button appearance</h3>
        <div
          className={stack({ gap: "sm", direction: "row", align: "center" })}
        >
          <Radio
            id="react-demo-badge-btn-sm"
            name="react-demo-badge-btn"
            value="badge-btn-sm"
            appearance="button"
            size="sm"
            checked={buttonGroup === "badge-btn-sm"}
            onChange={() => setButtonGroup("badge-btn-sm")}
          >
            Small{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Radio>
          <Radio
            id="react-demo-badge-btn-md"
            name="react-demo-badge-btn"
            value="badge-btn-md"
            appearance="button"
            size="md"
            checked={buttonGroup === "badge-btn-md"}
            onChange={() => setButtonGroup("badge-btn-md")}
          >
            Medium{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Radio>
          <Radio
            id="react-demo-badge-btn-lg"
            name="react-demo-badge-btn"
            value="badge-btn-lg"
            appearance="button"
            size="lg"
            checked={buttonGroup === "badge-btn-lg"}
            onChange={() => setButtonGroup("badge-btn-lg")}
          >
            Large{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Radio>
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/radio/badge.demo.tsx — edit the source, not this file.
  import Radio from "@pindoba/svelte-radio";
  import Badge from "@pindoba/svelte-badge";
  import { stack } from "@pindoba/styled-system/patterns";

  let radioGroup = $state("badge-radio-sm");
  let buttonGroup = $state("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-demo-badge-radio-sm"
        name="svelte-demo-badge-radio"
        value="badge-radio-sm"
        size="sm"
        bind:group={radioGroup}
      >
        Small <Badge tone="primary" size="sm">3</Badge>
      </Radio>
      <Radio
        id="svelte-demo-badge-radio-md"
        name="svelte-demo-badge-radio"
        value="badge-radio-md"
        size="md"
        bind:group={radioGroup}
      >
        Medium <Badge tone="primary" size="sm">3</Badge>
      </Radio>
      <Radio
        id="svelte-demo-badge-radio-lg"
        name="svelte-demo-badge-radio"
        value="badge-radio-lg"
        size="lg"
        bind:group={radioGroup}
      >
        Large <Badge tone="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-demo-badge-btn-sm"
        name="svelte-demo-badge-btn"
        value="badge-btn-sm"
        appearance="button"
        size="sm"
        bind:group={buttonGroup}
      >
        Small <Badge tone="primary" size="sm">3</Badge>
      </Radio>
      <Radio
        id="svelte-demo-badge-btn-md"
        name="svelte-demo-badge-btn"
        value="badge-btn-md"
        appearance="button"
        size="md"
        bind:group={buttonGroup}
      >
        Medium <Badge tone="primary" size="sm">3</Badge>
      </Radio>
      <Radio
        id="svelte-demo-badge-btn-lg"
        name="svelte-demo-badge-btn"
        value="badge-btn-lg"
        appearance="button"
        size="lg"
        bind:group={buttonGroup}
      >
        Large <Badge tone="primary" size="sm">3</Badge>
      </Radio>
    </div>
  </div>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/radio/badge.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { Badge } from "@pindoba/vue-badge";
import { stack } from "@pindoba/styled-system/patterns";

const radioGroup = ref("badge-radio-sm");
const buttonGroup = ref("badge-btn-sm");
</script>

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

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

// GENERATED from packages/demos/radio/badge.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Radio } from "@pindoba/solid-radio";
import { Badge } from "@pindoba/solid-badge";
import { stack } from "@pindoba/styled-system/patterns";

export default function BadgeDemo() {
  const [radioGroup, setRadioGroup] = createSignal("badge-radio-sm");
  const [buttonGroup, setButtonGroup] = createSignal("badge-btn-sm");
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>radio appearance</h3>
        <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
          <Radio
            id="solid-demo-badge-radio-sm"
            name="solid-demo-badge-radio"
            value="badge-radio-sm"
            size="sm"
            checked={radioGroup() === "badge-radio-sm"}
            onChange={() => setRadioGroup("badge-radio-sm")}
          >
            Small{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Radio>
          <Radio
            id="solid-demo-badge-radio-md"
            name="solid-demo-badge-radio"
            value="badge-radio-md"
            size="md"
            checked={radioGroup() === "badge-radio-md"}
            onChange={() => setRadioGroup("badge-radio-md")}
          >
            Medium{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Radio>
          <Radio
            id="solid-demo-badge-radio-lg"
            name="solid-demo-badge-radio"
            value="badge-radio-lg"
            size="lg"
            checked={radioGroup() === "badge-radio-lg"}
            onChange={() => setRadioGroup("badge-radio-lg")}
          >
            Large{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Radio>
        </div>
      </div>

      <div>
        <h3>button appearance</h3>
        <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
          <Radio
            id="solid-demo-badge-btn-sm"
            name="solid-demo-badge-btn"
            value="badge-btn-sm"
            appearance="button"
            size="sm"
            checked={buttonGroup() === "badge-btn-sm"}
            onChange={() => setButtonGroup("badge-btn-sm")}
          >
            Small{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Radio>
          <Radio
            id="solid-demo-badge-btn-md"
            name="solid-demo-badge-btn"
            value="badge-btn-md"
            appearance="button"
            size="md"
            checked={buttonGroup() === "badge-btn-md"}
            onChange={() => setButtonGroup("badge-btn-md")}
          >
            Medium{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Radio>
          <Radio
            id="solid-demo-badge-btn-lg"
            name="solid-demo-badge-btn"
            value="badge-btn-lg"
            appearance="button"
            size="lg"
            checked={buttonGroup() === "badge-btn-lg"}
            onChange={() => setButtonGroup("badge-btn-lg")}
          >
            Large{" "}
            <Badge tone="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.

PreviewCode

---
// GENERATED from packages/demos/radio/leading-trailing.demo.tsx — edit the source, not this file.
import Radio from "@pindoba/astro-radio";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { Mail } from "@lucide/astro";
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-demo-lt-rbtn-${size}`}
          appearance="button"
          name="astro-demo-lt-demo-button"
          value={size}
          size={size}
          checked={size === "md"}
          fullWidth
        >
          <Stamp slot="leading" emphasis="adaptive" size="xs" shape="circle">
            <Mail />
          </Stamp>
          <Badge slot="trailing" emphasis="adaptive" size="sm">
            7
          </Badge>
          Unread
        </Radio>
      ))}
    </div>
  </div>

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

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

// GENERATED from packages/demos/radio/leading-trailing.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Radio } from "@pindoba/react-radio";
import { Badge } from "@pindoba/react-badge";
import { Stamp } from "@pindoba/react-stamp";
import { Mail } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";

const sizes = ["sm", "md", "lg"] as const;
export default function LeadingTrailingDemo() {
  const [buttonGroup, setButtonGroup] = useState("md");
  const [buttonLeadingGroup, setButtonLeadingGroup] = useState("md");
  const [buttonTrailingGroup, setButtonTrailingGroup] = useState("md");
  const [radioGroup, setRadioGroup] = useState("md");
  return (
    <div className={stack({ gap: "lg", direction: "column" })}>
      <div>
        <h3>button appearance — both slots</h3>
        <div className={stack({ gap: "sm", direction: "column" })}>
          {sizes.map((size) => (
            <Radio
              key={size}
              id={`react-demo-lt-rbtn-${size}`}
              appearance="button"
              name="react-demo-lt-demo-button"
              value={size}
              size={size}
              checked={buttonGroup === size}
              onChange={() => setButtonGroup(size)}
              fullWidth
              leading={
                <Stamp emphasis="adaptive" size="xs" shape="circle">
                  <Mail />
                </Stamp>
              }
              trailing={
                <Badge emphasis="adaptive" size="sm">
                  7
                </Badge>
              }
            >
              Unread
            </Radio>
          ))}
        </div>
      </div>

      <div>
        <h3>button appearance — leading only</h3>
        <div className={stack({ gap: "sm", direction: "column" })}>
          {sizes.map((size) => (
            <Radio
              key={size}
              id={`react-demo-lt-rbtn-leading-${size}`}
              appearance="button"
              name="react-demo-lt-demo-button-leading"
              value={size}
              size={size}
              checked={buttonLeadingGroup === size}
              onChange={() => setButtonLeadingGroup(size)}
              fullWidth
              leading={
                <Stamp emphasis="adaptive" size="xs" shape="circle">
                  <Mail />
                </Stamp>
              }
            >
              Unread
            </Radio>
          ))}
        </div>
      </div>

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

      <div>
        <h3>radio appearance</h3>
        <div className={stack({ gap: "sm", direction: "column" })}>
          {sizes.map((size) => (
            <Radio
              key={size}
              id={`react-demo-lt-r-${size}`}
              name="react-demo-lt-demo-radio"
              value={size}
              size={size}
              checked={radioGroup === size}
              onChange={() => setRadioGroup(size)}
              trailing={
                <Badge emphasis="adaptive" size="sm">
                  $9/mo
                </Badge>
              }
            >
              Pro plan
            </Radio>
          ))}
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/radio/leading-trailing.demo.tsx — edit the source, not this file.
  import Radio from "@pindoba/svelte-radio";
  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("md");
  let buttonLeadingGroup = $state("md");
  let buttonTrailingGroup = $state("md");
  let radioGroup = $state("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-demo-lt-rbtn-${size}`}
          appearance="button"
          name="svelte-demo-lt-demo-button"
          value={size}
          {size}
          bind:group={buttonGroup}
          fullWidth
        >
          {#snippet leading()}
            <Stamp emphasis="adaptive" size="xs" shape="circle">
              <LucideMail />
            </Stamp>
          {/snippet}
          {#snippet trailing()}
            <Badge emphasis="adaptive" size="sm">7</Badge>
          {/snippet}
          Unread
        </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-demo-lt-rbtn-leading-${size}`}
          appearance="button"
          name="svelte-demo-lt-demo-button-leading"
          value={size}
          {size}
          bind:group={buttonLeadingGroup}
          fullWidth
        >
          {#snippet leading()}
            <Stamp emphasis="adaptive" size="xs" shape="circle">
              <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-demo-lt-rbtn-trailing-${size}`}
          appearance="button"
          name="svelte-demo-lt-demo-button-trailing"
          value={size}
          {size}
          bind:group={buttonTrailingGroup}
          fullWidth
        >
          {#snippet trailing()}
            <Badge emphasis="adaptive" size="sm">7</Badge>
          {/snippet}
          Unread
        </Radio>
      {/each}
    </div>
  </div>

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

<script setup lang="ts">
// GENERATED from packages/demos/radio/leading-trailing.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";

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

const buttonGroup = ref("md");
const buttonLeadingGroup = ref("md");
const buttonTrailingGroup = ref("md");
const radioGroup = ref("md");
</script>

<template>
  <div :class="stack({ gap: 'lg', direction: 'column' })">
    <div>
      <h3>button appearance — both slots</h3>
      <div :class="stack({ gap: 'sm', direction: 'column' })">
        <Radio
          v-for="size in sizes"
          :key="size"
          :id="`vue-demo-lt-rbtn-${size}`"
          appearance="button"
          name="vue-demo-lt-demo-button"
          :value="size"
          :size="size"
          :checked="buttonGroup === size"
          :onChange="() => (buttonGroup = size)"
          :fullWidth="true"
        >
          <template #leading>
            <Stamp emphasis="adaptive" size="xs" shape="circle">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-mail"
                aria-hidden="true"
              >
                <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />
                <rect x="2" y="4" width="20" height="16" rx="2" />
              </svg>
            </Stamp>
          </template>
          <template #trailing>
            <Badge emphasis="adaptive" size="sm">7</Badge>
          </template>
          Unread
        </Radio>
      </div>
    </div>

    <div>
      <h3>button appearance — leading only</h3>
      <div :class="stack({ gap: 'sm', direction: 'column' })">
        <Radio
          v-for="size in sizes"
          :key="size"
          :id="`vue-demo-lt-rbtn-leading-${size}`"
          appearance="button"
          name="vue-demo-lt-demo-button-leading"
          :value="size"
          :size="size"
          :checked="buttonLeadingGroup === size"
          :onChange="() => (buttonLeadingGroup = size)"
          :fullWidth="true"
        >
          <template #leading>
            <Stamp emphasis="adaptive" size="xs" shape="circle">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-mail"
                aria-hidden="true"
              >
                <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />
                <rect x="2" y="4" width="20" height="16" rx="2" />
              </svg>
            </Stamp>
          </template>
          Unread
        </Radio>
      </div>
    </div>

    <div>
      <h3>button appearance — trailing only</h3>
      <div :class="stack({ gap: 'sm', direction: 'column' })">
        <Radio
          v-for="size in sizes"
          :key="size"
          :id="`vue-demo-lt-rbtn-trailing-${size}`"
          appearance="button"
          name="vue-demo-lt-demo-button-trailing"
          :value="size"
          :size="size"
          :checked="buttonTrailingGroup === size"
          :onChange="() => (buttonTrailingGroup = size)"
          :fullWidth="true"
        >
          <template #trailing>
            <Badge emphasis="adaptive" size="sm">7</Badge>
          </template>
          Unread
        </Radio>
      </div>
    </div>

    <div>
      <h3>radio appearance</h3>
      <div :class="stack({ gap: 'sm', direction: 'column' })">
        <Radio
          v-for="size in sizes"
          :key="size"
          :id="`vue-demo-lt-r-${size}`"
          name="vue-demo-lt-demo-radio"
          :value="size"
          :size="size"
          :checked="radioGroup === size"
          :onChange="() => (radioGroup = size)"
        >
          <template #trailing>
            <Badge emphasis="adaptive" size="sm">$9/mo</Badge>
          </template>
          Pro plan
        </Radio>
      </div>
    </div>
  </div>
</template>

// GENERATED from packages/demos/radio/leading-trailing.demo.tsx — edit the source, not this file.
import { createSignal, For } from "solid-js";
import { Radio } from "@pindoba/solid-radio";
import { Badge } from "@pindoba/solid-badge";
import { Stamp } from "@pindoba/solid-stamp";
import { stack } from "@pindoba/styled-system/patterns";

const sizes = ["sm", "md", "lg"] as const;
export default function LeadingTrailingDemo() {
  const [buttonGroup, setButtonGroup] = createSignal("md");
  const [buttonLeadingGroup, setButtonLeadingGroup] = createSignal("md");
  const [buttonTrailingGroup, setButtonTrailingGroup] = createSignal("md");
  const [radioGroup, setRadioGroup] = createSignal("md");
  return (
    <div class={stack({ gap: "lg", direction: "column" })}>
      <div>
        <h3>button appearance — both slots</h3>
        <div class={stack({ gap: "sm", direction: "column" })}>
          <For each={sizes}>
            {(size) => (
              <Radio
                id={`solid-demo-lt-rbtn-${size}`}
                appearance="button"
                name="solid-demo-lt-demo-button"
                value={size}
                size={size}
                checked={buttonGroup() === size}
                onChange={() => setButtonGroup(size)}
                fullWidth
                leading={
                  <Stamp emphasis="adaptive" size="xs" shape="circle">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-mail"
                      aria-hidden="true"
                    >
                      <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />
                      <rect x="2" y="4" width="20" height="16" rx="2" />
                    </svg>
                  </Stamp>
                }
                trailing={
                  <Badge emphasis="adaptive" size="sm">
                    7
                  </Badge>
                }
              >
                Unread
              </Radio>
            )}
          </For>
        </div>
      </div>

      <div>
        <h3>button appearance — leading only</h3>
        <div class={stack({ gap: "sm", direction: "column" })}>
          <For each={sizes}>
            {(size) => (
              <Radio
                id={`solid-demo-lt-rbtn-leading-${size}`}
                appearance="button"
                name="solid-demo-lt-demo-button-leading"
                value={size}
                size={size}
                checked={buttonLeadingGroup() === size}
                onChange={() => setButtonLeadingGroup(size)}
                fullWidth
                leading={
                  <Stamp emphasis="adaptive" size="xs" shape="circle">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-mail"
                      aria-hidden="true"
                    >
                      <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />
                      <rect x="2" y="4" width="20" height="16" rx="2" />
                    </svg>
                  </Stamp>
                }
              >
                Unread
              </Radio>
            )}
          </For>
        </div>
      </div>

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

      <div>
        <h3>radio appearance</h3>
        <div class={stack({ gap: "sm", direction: "column" })}>
          <For each={sizes}>
            {(size) => (
              <Radio
                id={`solid-demo-lt-r-${size}`}
                name="solid-demo-lt-demo-radio"
                value={size}
                size={size}
                checked={radioGroup() === size}
                onChange={() => setRadioGroup(size)}
                trailing={
                  <Badge emphasis="adaptive" size="sm">
                    $9/mo
                  </Badge>
                }
              >
                Pro plan
              </Radio>
            )}
          </For>
        </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.

PreviewCode

Custom root style via passThrough

Extra padding

Custom input style via passThrough

Larger indicator

Custom props via passThrough

With data attributes

---
// GENERATED from packages/demos/radio/custom.demo.tsx — edit the source, not this file.
import Radio from "@pindoba/astro-radio";
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-demo-cust-1"
        name="astro-demo-custom"
        value="cust-c1"
        checked
        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-demo-cust-2"
        name="astro-demo-custom"
        value="cust-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-demo-cust-3"
        name="astro-demo-custom"
        value="cust-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

// GENERATED from packages/demos/radio/custom.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Radio } from "@pindoba/react-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function CustomDemo() {
  const [group, setGroup] = useState("cust-c1");
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Custom root style via passThrough</h3>
        <div className={stack({ gap: "md", direction: "column" })}>
          <Radio
            id="react-demo-cust-1"
            name="react-demo-custom"
            value="cust-c1"
            checked={group === "cust-c1"}
            onChange={() => setGroup("cust-c1")}
            passThrough={{
              root: {
                style: { gap: "lg", padding: "sm" },
              },
            }}
          >
            Extra padding
          </Radio>
        </div>
      </div>

      <div>
        <h3>Custom input style via passThrough</h3>
        <div className={stack({ gap: "md", direction: "column" })}>
          <Radio
            id="react-demo-cust-2"
            name="react-demo-custom"
            value="cust-c2"
            checked={group === "cust-c2"}
            onChange={() => setGroup("cust-c2")}
            passThrough={{
              input: {
                style: { width: "2em", height: "2em" },
              },
            }}
          >
            Larger indicator
          </Radio>
        </div>
      </div>

      <div>
        <h3>Custom props via passThrough</h3>
        <div className={stack({ gap: "md", direction: "column" })}>
          <Radio
            id="react-demo-cust-3"
            name="react-demo-custom"
            value="cust-c3"
            checked={group === "cust-c3"}
            onChange={() => setGroup("cust-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">
  // GENERATED from packages/demos/radio/custom.demo.tsx — edit the source, not this file.
  import Radio from "@pindoba/svelte-radio";
  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-demo-cust-1"
        name="svelte-demo-custom"
        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-demo-cust-2"
        name="svelte-demo-custom"
        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-demo-cust-3"
        name="svelte-demo-custom"
        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>

Custom root style via passThrough

Extra padding

Custom input style via passThrough

Larger indicator

Custom props via passThrough

With data attributes

<script setup lang="ts">
// GENERATED from packages/demos/radio/custom.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";

const group = ref("cust-c1");
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <div>
      <h3>Custom root style via passThrough</h3>
      <div :class="stack({ gap: 'md', direction: 'column' })">
        <Radio
          id="vue-demo-cust-1"
          name="vue-demo-custom"
          value="cust-c1"
          :checked="group === 'cust-c1'"
          :onChange="() => (group = 'cust-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="vue-demo-cust-2"
          name="vue-demo-custom"
          value="cust-c2"
          :checked="group === 'cust-c2'"
          :onChange="() => (group = 'cust-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="vue-demo-cust-3"
          name="vue-demo-custom"
          value="cust-c3"
          :checked="group === 'cust-c3'"
          :onChange="() => (group = 'cust-c3')"
          :passThrough="{
            root: {
              props: { 'data-testid': 'my-radio' },
            },
            input: {
              props: { 'aria-label': 'Custom radio button' },
            },
          }"
        >
          With data attributes
        </Radio>
      </div>
    </div>
  </div>
</template>

Custom root style via passThrough

Extra padding

Custom input style via passThrough

Larger indicator

Custom props via passThrough

With data attributes

// GENERATED from packages/demos/radio/custom.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Radio } from "@pindoba/solid-radio";
import { stack } from "@pindoba/styled-system/patterns";

export default function CustomDemo() {
  const [group, setGroup] = createSignal("cust-c1");
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Custom root style via passThrough</h3>
        <div class={stack({ gap: "md", direction: "column" })}>
          <Radio
            id="solid-demo-cust-1"
            name="solid-demo-custom"
            value="cust-c1"
            checked={group() === "cust-c1"}
            onChange={() => setGroup("cust-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="solid-demo-cust-2"
            name="solid-demo-custom"
            value="cust-c2"
            checked={group() === "cust-c2"}
            onChange={() => setGroup("cust-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="solid-demo-cust-3"
            name="solid-demo-custom"
            value="cust-c3"
            checked={group() === "cust-c3"}
            onChange={() => setGroup("cust-c3")}
            passThrough={{
              root: {
                props: { "data-testid": "my-radio" },
              },
              input: {
                props: { "aria-label": "Custom radio button" },
              },
            }}
          >
            With data attributes
          </Radio>
        </div>
      </div>
    </div>
  );
}

#Default

#Appearance

radio (default)

button

tab (horizontal)

tab (vertical)

#Size

radio appearance

button appearance

#Button

Primary (default)

Danger

Warning

Success

#Emphasis

Primary (default)

Secondary

Tertiary

Secondary + tone

#Tab

Tab

Tab — Vertical orientation

Tab — Danger tone

Tab — Background

Tab — Leading and trailing slots

#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

Default

Appearance

Size

Button

Emphasis

Tab

With Badge

Leading & Trailing slots

Custom Styling