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 feedback), and tab (minimal underline tab — a 2px accent bar on the bottom edge, or the inline-start edge with orientation="vertical").

Default

AstroReactSvelteVue

PreviewCode

Option 1Option 2Disabled

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

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

Option 1Option 2Disabled

import { useState } from "react";
import { Radio } from "../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-def-1"
        name="react-default"
        value="option1"
        checked={group === "option1"}
        onChange={() => setGroup("option1")}
      >
        Option 1
      </Radio>
      <Radio
        id="react-def-2"
        name="react-default"
        value="option2"
        checked={group === "option2"}
        onChange={() => setGroup("option2")}
      >
        Option 2
      </Radio>
      <Radio
        id="react-def-3"
        name="react-default"
        value="option3"
        checked={group === "option3"}
        onChange={() => setGroup("option3")}
        disabled
      >
        Disabled
      </Radio>
    </div>
  );
}

Option 1 Option 2 Disabled

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

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

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

Option 1Option 2Disabled

<script setup lang="ts">
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
const group = ref("option2");
</script>

<template>
  <div :class="col">
    <Radio
      id="vue-def-1"
      name="vue-def"
      value="option1"
      :checked="group === 'option1'"
      @change="group = 'option1'"
      >Option 1</Radio
    >
    <Radio
      id="vue-def-2"
      name="vue-def"
      value="option2"
      :checked="group === 'option2'"
      @change="group = 'option2'"
      >Option 2</Radio
    >
    <Radio id="vue-def-3" name="vue-def" value="option3" disabled
      >Disabled</Radio
    >
  </div>
</template>

Appearance

All four appearance variants side by side.

AstroReactSvelteVue

PreviewCode

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

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

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

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

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

import { useState } from "react";
import { Radio } from "../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-app-r1"
            name="react-app-radio"
            value="app-r1"
            checked={radioGroup === "app-r1"}
            onChange={() => setRadioGroup("app-r1")}
          >
            Option 1
          </Radio>
          <Radio
            id="react-app-r2"
            name="react-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" })}>
          {["app-b1", "app-b2", "app-b3"].map((value, i) => (
            <Radio
              key={value}
              id={`react-${value}`}
              name="react-app-button"
              value={value}
              appearance="button"
              checked={buttonGroup === value}
              onChange={() => setButtonGroup(value)}
            >
              Option {i + 1}
            </Radio>
          ))}
        </div>
      </div>

      <div>
        <h3>tab (horizontal)</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          {["app-th1", "app-th2", "app-th3"].map((value, i) => (
            <Radio
              key={value}
              id={`react-${value}`}
              name="react-app-tab-h"
              value={value}
              appearance="tab"
              checked={tabHGroup === value}
              onChange={() => setTabHGroup(value)}
            >
              Tab {i + 1}
            </Radio>
          ))}
        </div>
      </div>

      <div>
        <h3>tab (vertical)</h3>
        <div className={stack({ gap: "xs", direction: "column" })}>
          {["app-tv1", "app-tv2"].map((value, i) => (
            <Radio
              key={value}
              id={`react-${value}`}
              name="react-app-tab-v"
              value={value}
              appearance="tab"
              orientation="vertical"
              checked={tabVGroup === value}
              onChange={() => setTabVGroup(value)}
            >
              Tab {i + 1}
            </Radio>
          ))}
        </div>
      </div>
    </div>
  );
}

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

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

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

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

  <div>
    <h3>tab (horizontal)</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Radio
        id="svelte-app-th1"
        value="app-th1"
        appearance="tab"
        bind:group={tabHGroup}
      >
        Tab 1
      </Radio>
      <Radio
        id="svelte-app-th2"
        value="app-th2"
        appearance="tab"
        bind:group={tabHGroup}
      >
        Tab 2
      </Radio>
      <Radio
        id="svelte-app-th3"
        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-app-tv1"
        value="app-tv1"
        appearance="tab"
        orientation="vertical"
        bind:group={tabVGroup}
      >
        Tab 1
      </Radio>
      <Radio
        id="svelte-app-tv2"
        value="app-tv2"
        appearance="tab"
        orientation="vertical"
        bind:group={tabVGroup}
      >
        Tab 2
      </Radio>
    </div>
  </div>
</div>

<script setup lang="ts">
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
const colSm = stack({ gap: "md", direction: "column" });
const row = stack({ gap: "sm", direction: "row" });
const colXs = stack({ gap: "xs", direction: "column" });
const radioG = ref("r2");
const buttonG = ref("b1");
const tabHG = ref("th1");
const tabVG = ref("tv1");
</script>

<template>
  <div :class="col">
    <div>
      <h3>radio (default)</h3>
      <div :class="colSm">
        <Radio
          v-for="v in ['r1', 'r2']"
          :key="v"
          :id="`vue-app-${v}`"
          name="vue-app-r"
          :value="v"
          :checked="radioG === v"
          @change="radioG = v"
          >Option {{ v.slice(1) }}</Radio
        >
      </div>
    </div>
    <div>
      <h3>button</h3>
      <div :class="row">
        <Radio
          v-for="v in ['b1', 'b2', 'b3']"
          :key="v"
          :id="`vue-app-${v}`"
          name="vue-app-b"
          appearance="button"
          :value="v"
          :checked="buttonG === v"
          @change="buttonG = v"
          >Option {{ v.slice(1) }}</Radio
        >
      </div>
    </div>
    <div>
      <h3>tab (horizontal)</h3>
      <div :class="row">
        <Radio
          v-for="v in ['th1', 'th2', 'th3']"
          :key="v"
          :id="`vue-app-${v}`"
          name="vue-app-th"
          appearance="tab"
          :value="v"
          :checked="tabHG === v"
          @change="tabHG = v"
          >Tab {{ v.slice(2) }}</Radio
        >
      </div>
    </div>
    <div>
      <h3>tab (vertical)</h3>
      <div :class="colXs">
        <Radio
          v-for="v in ['tv1', 'tv2']"
          :key="v"
          :id="`vue-app-${v}`"
          name="vue-app-tv"
          appearance="tab"
          orientation="vertical"
          :value="v"
          :checked="tabVG === v"
          @change="tabVG = v"
          >Tab {{ v.slice(2) }}</Radio
        >
      </div>
    </div>
  </div>
</template>

Size

Three sizes are available across all appearances.

AstroReactSvelteVue

PreviewCode

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

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

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

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

const sizes = ["sm", "md", "lg"] as const;
const labels = { sm: "Small", md: "Medium", lg: "Large" } as const;

export default function SizeDemo() {
  const [radioGroup, setRadioGroup] = useState("react-size-md");
  const [buttonGroup, setButtonGroup] = useState("react-sbtn-md");

  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>radio appearance</h3>
        <div
          className={stack({ gap: "sm", direction: "row", align: "center" })}
        >
          {sizes.map((size) => {
            const value = `react-size-${size}`;
            return (
              <Radio
                key={value}
                id={value}
                name="react-size-radio"
                value={value}
                size={size}
                checked={radioGroup === value}
                onChange={() => setRadioGroup(value)}
              >
                {labels[size]}
              </Radio>
            );
          })}
        </div>
      </div>

      <div>
        <h3>button appearance</h3>
        <div
          className={stack({ gap: "sm", direction: "row", align: "center" })}
        >
          {sizes.map((size) => {
            const value = `react-sbtn-${size}`;
            return (
              <Radio
                key={value}
                id={value}
                name="react-size-button"
                value={value}
                appearance="button"
                size={size}
                checked={buttonGroup === value}
                onChange={() => setButtonGroup(value)}
              >
                {labels[size]}
              </Radio>
            );
          })}
        </div>
      </div>
    </div>
  );
}

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

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

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

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

<script setup lang="ts">
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
const row = stack({ gap: "sm", direction: "row", align: "center" });
const radioG = ref("sm");
const buttonG = ref("sm");
const sizes = ["sm", "md", "lg"] as const;
const cap = (s: string) => ({ sm: "Small", md: "Medium", lg: "Large" })[s];
</script>

<template>
  <div :class="col">
    <div>
      <h3>radio appearance</h3>
      <div :class="row">
        <Radio
          v-for="s in sizes"
          :key="s"
          :id="`vue-size-${s}`"
          name="vue-size-r"
          :value="s"
          :size="s"
          :checked="radioG === s"
          @change="radioG = s"
          >{{ cap(s) }}</Radio
        >
      </div>
    </div>
    <div>
      <h3>button appearance</h3>
      <div :class="row">
        <Radio
          v-for="s in sizes"
          :key="s"
          :id="`vue-sbtn-${s}`"
          name="vue-size-b"
          appearance="button"
          :value="s"
          :size="s"
          :checked="buttonG === s"
          @change="buttonG = s"
          >{{ cap(s) }}</Radio
        >
      </div>
    </div>
  </div>
</template>

Button

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

AstroReactSvelteVue

PreviewCode

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

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

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

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

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

import { useState } from "react";
import { Radio } from "../Radio";
import { stack } from "@pindoba/styled-system/patterns";
import type { RadioProps } from "../Radio";

type Feedback = RadioProps["feedback"];

function Group({
  title,
  prefix,
  count,
  feedback,
}: {
  title: string;
  prefix: string;
  count: number;
  feedback?: Feedback;
}) {
  const [group, setGroup] = useState(`${prefix}1`);
  return (
    <div>
      <h3>{title}</h3>
      <div className={stack({ gap: "sm", direction: "row" })}>
        {Array.from({ length: count }, (_, i) => {
          const value = `${prefix}${i + 1}`;
          return (
            <Radio
              key={value}
              id={`react-${value}`}
              name={`react-btn-${prefix}`}
              value={value}
              appearance="button"
              feedback={feedback}
              checked={group === value}
              onChange={() => setGroup(value)}
            >
              Option {i + 1}
            </Radio>
          );
        })}
      </div>
    </div>
  );
}

export default function ButtonDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <Group title="Primary (default)" prefix="btn-p" count={3} />
      <Group title="Danger" prefix="btn-d" count={2} feedback="danger" />
      <Group title="Warning" prefix="btn-w" count={2} feedback="warning" />
      <Group title="Success" prefix="btn-s" count={2} feedback="success" />
    </div>
  );
}

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

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

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

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

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

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

<script setup lang="ts">
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
const row = stack({ gap: "sm", direction: "row" });
const groups = [
  { title: "Primary (default)", feedback: undefined, count: 3 },
  { title: "Danger", feedback: "danger", count: 2 },
  { title: "Warning", feedback: "warning", count: 2 },
  { title: "Success", feedback: "success", count: 2 },
] as const;
const sel = ref<Record<string, string>>({
  "Primary (default)": "1",
  Danger: "1",
  Warning: "1",
  Success: "1",
});
</script>

<template>
  <div :class="col">
    <div v-for="g in groups" :key="g.title">
      <h3>{{ g.title }}</h3>
      <div :class="row">
        <Radio
          v-for="i in g.count"
          :key="i"
          :id="`vue-rbtn-${g.title}-${i}`"
          :name="`vue-rbtn-${g.title}`"
          appearance="button"
          :feedback="g.feedback"
          :value="String(i)"
          :checked="sel[g.title] === String(i)"
          @change="sel[g.title] = String(i)"
        >
          Option {{ i }}
        </Radio>
      </div>
    </div>
  </div>
</template>

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.

AstroReactSvelteVue

PreviewCode

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

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Primary (default)</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="astro-ebtn-p1"
          name="astro-ebtn-primary"
          value="p1"
          appearance="button"
          checked
        >
          Option 1
        </Radio>
        <Radio
          id="astro-ebtn-p2"
          name="astro-ebtn-primary"
          value="p2"
          appearance="button"
        >
          Option 2
        </Radio>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="astro-ebtn-pn1"
          name="astro-ebtn-primary-neutral"
          value="pn1"
          appearance="button"
          feedback="neutral"
          checked
        >
          Neutral 1
        </Radio>
        <Radio
          id="astro-ebtn-pn2"
          name="astro-ebtn-primary-neutral"
          value="pn2"
          appearance="button"
          feedback="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-ebtn-s1"
          name="astro-ebtn-secondary"
          value="s1"
          appearance="button"
          emphasis="secondary"
          checked
        >
          Option 1
        </Radio>
        <Radio
          id="astro-ebtn-s2"
          name="astro-ebtn-secondary"
          value="s2"
          appearance="button"
          emphasis="secondary"
        >
          Option 2
        </Radio>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="astro-ebtn-sn1"
          name="astro-ebtn-secondary-neutral"
          value="sn1"
          appearance="button"
          emphasis="secondary"
          feedback="neutral"
          checked
        >
          Neutral 1
        </Radio>
        <Radio
          id="astro-ebtn-sn2"
          name="astro-ebtn-secondary-neutral"
          value="sn2"
          appearance="button"
          emphasis="secondary"
          feedback="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-ebtn-t1"
          name="astro-ebtn-tertiary"
          value="t1"
          appearance="button"
          emphasis="tertiary"
          checked
        >
          Option 1
        </Radio>
        <Radio
          id="astro-ebtn-t2"
          name="astro-ebtn-tertiary"
          value="t2"
          appearance="button"
          emphasis="tertiary"
        >
          Option 2
        </Radio>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="astro-ebtn-tn1"
          name="astro-ebtn-tertiary-neutral"
          value="tn1"
          appearance="button"
          emphasis="tertiary"
          feedback="neutral"
          checked
        >
          Neutral 1
        </Radio>
        <Radio
          id="astro-ebtn-tn2"
          name="astro-ebtn-tertiary-neutral"
          value="tn2"
          appearance="button"
          emphasis="tertiary"
          feedback="neutral"
        >
          Neutral 2
        </Radio>
      </div>
    </div>
  </div>

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

import { useState } from "react";
import { Radio } from "../Radio";
import { stack } from "@pindoba/styled-system/patterns";
import type { RadioProps } from "../Radio";

type Emphasis = RadioProps["emphasis"];
type Feedback = RadioProps["feedback"];

function Pair({
  prefix,
  label,
  emphasis,
  feedback,
}: {
  prefix: string;
  label: string;
  emphasis?: Emphasis;
  feedback?: Feedback;
}) {
  const [group, setGroup] = useState(`${prefix}1`);
  return (
    <div className={stack({ gap: "sm", direction: "row" })}>
      {[1, 2].map((n) => {
        const value = `${prefix}${n}`;
        return (
          <Radio
            key={value}
            id={`react-${value}`}
            name={`react-${prefix}`}
            value={value}
            appearance="button"
            emphasis={emphasis}
            feedback={feedback}
            checked={group === value}
            onChange={() => setGroup(value)}
          >
            {label} {n}
          </Radio>
        );
      })}
    </div>
  );
}

export default function EmphasisDemo() {
  const [feedbackGroup, setFeedbackGroup] = useState("ebtn-fbn");
  const feedbacks: Array<[string, string, Feedback]> = [
    ["ebtn-fbn", "Neutral", "neutral"],
    ["ebtn-fbd", "Danger", "danger"],
    ["ebtn-fbw", "Warning", "warning"],
    ["ebtn-fbs", "Success", "success"],
  ];

  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Primary (default)</h3>
        <div className={stack({ gap: "lg", direction: "row" })}>
          <Pair prefix="ebtn-p" label="Option" />
          <Pair prefix="ebtn-pn" label="Neutral" feedback="neutral" />
        </div>
      </div>

      <div>
        <h3>Secondary</h3>
        <div className={stack({ gap: "lg", direction: "row" })}>
          <Pair prefix="ebtn-s" label="Option" emphasis="secondary" />
          <Pair
            prefix="ebtn-sn"
            label="Neutral"
            emphasis="secondary"
            feedback="neutral"
          />
        </div>
      </div>

      <div>
        <h3>Tertiary</h3>
        <div className={stack({ gap: "lg", direction: "row" })}>
          <Pair prefix="ebtn-t" label="Option" emphasis="tertiary" />
          <Pair
            prefix="ebtn-tn"
            label="Neutral"
            emphasis="tertiary"
            feedback="neutral"
          />
        </div>
      </div>

      <div>
        <h3>Secondary + feedback</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          {feedbacks.map(([value, label, feedback]) => (
            <Radio
              key={value}
              id={`react-${value}`}
              name="react-ebtn-fb"
              value={value}
              appearance="button"
              emphasis="secondary"
              feedback={feedback}
              checked={feedbackGroup === value}
              onChange={() => setFeedbackGroup(value)}
            >
              {label}
            </Radio>
          ))}
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  import Radio from "../Radio.svelte";
  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-ebtn-p1"
          value="ebtn-p1"
          appearance="button"
          bind:group={primaryGroup}
        >
          Option 1
        </Radio>
        <Radio
          id="svelte-ebtn-p2"
          value="ebtn-p2"
          appearance="button"
          bind:group={primaryGroup}
        >
          Option 2
        </Radio>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="svelte-ebtn-pn1"
          value="ebtn-pn1"
          appearance="button"
          feedback="neutral"
          bind:group={primaryNeutralGroup}
        >
          Neutral 1
        </Radio>
        <Radio
          id="svelte-ebtn-pn2"
          value="ebtn-pn2"
          appearance="button"
          feedback="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-ebtn-s1"
          value="ebtn-s1"
          appearance="button"
          emphasis="secondary"
          bind:group={secondaryGroup}
        >
          Option 1
        </Radio>
        <Radio
          id="svelte-ebtn-s2"
          value="ebtn-s2"
          appearance="button"
          emphasis="secondary"
          bind:group={secondaryGroup}
        >
          Option 2
        </Radio>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="svelte-ebtn-sn1"
          value="ebtn-sn1"
          appearance="button"
          emphasis="secondary"
          feedback="neutral"
          bind:group={secondaryNeutralGroup}
        >
          Neutral 1
        </Radio>
        <Radio
          id="svelte-ebtn-sn2"
          value="ebtn-sn2"
          appearance="button"
          emphasis="secondary"
          feedback="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-ebtn-t1"
          value="ebtn-t1"
          appearance="button"
          emphasis="tertiary"
          bind:group={tertiaryGroup}
        >
          Option 1
        </Radio>
        <Radio
          id="svelte-ebtn-t2"
          value="ebtn-t2"
          appearance="button"
          emphasis="tertiary"
          bind:group={tertiaryGroup}
        >
          Option 2
        </Radio>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Radio
          id="svelte-ebtn-tn1"
          value="ebtn-tn1"
          appearance="button"
          emphasis="tertiary"
          feedback="neutral"
          bind:group={tertiaryNeutralGroup}
        >
          Neutral 1
        </Radio>
        <Radio
          id="svelte-ebtn-tn2"
          value="ebtn-tn2"
          appearance="button"
          emphasis="tertiary"
          feedback="neutral"
          bind:group={tertiaryNeutralGroup}
        >
          Neutral 2
        </Radio>
      </div>
    </div>
  </div>

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

<script setup lang="ts">
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
const lg = stack({ gap: "lg", direction: "row" });
const sm = stack({ gap: "sm", direction: "row" });
const emphases = [
  { title: "Primary (default)", emphasis: undefined },
  { title: "Secondary", emphasis: "secondary" },
  { title: "Tertiary", emphasis: "tertiary" },
] as const;
const fb = ["neutral", "danger", "warning", "success"] as const;
const sel = ref<Record<string, string>>({});
const pick = (k: string, v: string) => (sel.value[k] = v);
const isOn = (k: string, v: string, dflt = "1") => (sel.value[k] ?? dflt) === v;
</script>

<template>
  <div :class="col">
    <div v-for="e in emphases" :key="e.title">
      <h3>{{ e.title }}</h3>
      <div :class="lg">
        <div :class="sm">
          <Radio
            v-for="i in 2"
            :key="i"
            :id="`vue-re-${e.title}-${i}`"
            :name="`vue-re-${e.title}`"
            appearance="button"
            :emphasis="e.emphasis"
            :value="String(i)"
            :checked="isOn(e.title, String(i))"
            @change="pick(e.title, String(i))"
            >Option {{ i }}</Radio
          >
        </div>
        <div :class="sm">
          <Radio
            v-for="i in 2"
            :key="i"
            :id="`vue-re-${e.title}-n${i}`"
            :name="`vue-re-${e.title}-n`"
            appearance="button"
            :emphasis="e.emphasis"
            feedback="neutral"
            :value="String(i)"
            :checked="isOn(e.title + 'n', String(i))"
            @change="pick(e.title + 'n', String(i))"
            >Neutral {{ i }}</Radio
          >
        </div>
      </div>
    </div>
    <div>
      <h3>Secondary + feedback</h3>
      <div :class="sm">
        <Radio
          v-for="f in fb"
          :key="f"
          :id="`vue-re-fb-${f}`"
          name="vue-re-fb"
          appearance="button"
          emphasis="secondary"
          :feedback="f"
          :value="f"
          :checked="isOn('fb', f, 'neutral')"
          @change="pick('fb', f)"
          >{{ f }}</Radio
        >
      </div>
    </div>
  </div>
</template>

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 feedback to change the accent color. Wrap tabs in a Group to get the 1px baseline track drawn for you — 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.

AstroReactSvelteVue

PreviewCode

---
import Radio from "../Radio.astro";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { GitBranch, Trash2 } from "@lucide/astro";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

// The 1px baseline track normally comes from a wrapping <Group> (or a
// Navigation/TabNav strip); the demo draws it on the plain wrapper instead.
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-tab-h1"
        name="astro-tab-horiz"
        value="h1"
        appearance="tab"
        checked
      >
        All
      </Radio>
      <Radio
        id="astro-tab-h2"
        name="astro-tab-horiz"
        value="h2"
        appearance="tab"
      >
        Active
      </Radio>
      <Radio
        id="astro-tab-h3"
        name="astro-tab-horiz"
        value="h3"
        appearance="tab"
      >
        Archived
      </Radio>
    </div>
  </div>

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

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

  <div>
    <h3>Tab — Background</h3>
    <!-- Opt-in resting fill on the neutral ramp; the default is transparent. -->
    <div class={hTrack}>
      <Radio
        id="astro-tab-b1"
        name="astro-tab-bg"
        value="b1"
        appearance="tab"
        background="surface.peak"
        checked
      >
        Inbox
      </Radio>
      <Radio
        id="astro-tab-b2"
        name="astro-tab-bg"
        value="b2"
        appearance="tab"
        background="surface.peak"
      >
        Archive
      </Radio>
    </div>
  </div>

  <div>
    <h3>Tab — Leading and trailing slots</h3>
    <!-- Tab rows are on the Control Var Contract: a leading Stamp and a
         trailing Badge size themselves to the row metrics, like Button. -->
    <div class={hTrack}>
      <Radio
        id="astro-tab-s1"
        name="astro-tab-slots"
        value="s1"
        appearance="tab"
        checked
      >
        <Stamp slot="leading" emphasis="ghost">
          <GitBranch />
        </Stamp>
        Active
        <Badge slot="trailing" size="sm">221</Badge>
      </Radio>
      <Radio
        id="astro-tab-s2"
        name="astro-tab-slots"
        value="s2"
        appearance="tab"
        feedback="danger"
      >
        <Stamp slot="leading" emphasis="ghost">
          <Trash2 />
        </Stamp>
        Deleted
        <Badge slot="trailing" size="sm" feedback="danger">0</Badge>
      </Radio>
    </div>
  </div>
</div>

import { useState } from "react";
import { Radio } from "../Radio";
import { Badge } from "@pindoba/react-badge";
import { Stamp } from "@pindoba/react-stamp";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";

const GitBranchIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <line x1="6" x2="6" y1="3" y2="15" />
    <circle cx="18" cy="6" r="3" />
    <circle cx="6" cy="18" r="3" />
    <path d="M18 9a9 9 0 0 1-9 9" />
  </svg>
);

const TrashIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M3 6h18" />
    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
  </svg>
);

// The 1px baseline track normally comes from a wrapping <Group> (or a
// Navigation/TabNav strip); the demo draws it on the plain wrapper instead.
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}>
          {[
            ["tab-h1", "All"],
            ["tab-h2", "Active"],
            ["tab-h3", "Archived"],
          ].map(([value, label]) => (
            <Radio
              key={value}
              id={`react-${value}`}
              name="react-tab-h"
              value={value}
              appearance="tab"
              checked={tabHGroup === value}
              onChange={() => setTabHGroup(value)}
            >
              {label}
            </Radio>
          ))}
        </div>
      </div>

      <div>
        <h3>Tab — Vertical orientation</h3>
        <div className={vTrack}>
          {[
            ["tab-v1", "Dashboard"],
            ["tab-v2", "Settings"],
            ["tab-v3", "Profile"],
          ].map(([value, label]) => (
            <Radio
              key={value}
              id={`react-${value}`}
              name="react-tab-v"
              value={value}
              appearance="tab"
              orientation="vertical"
              checked={tabVGroup === value}
              onChange={() => setTabVGroup(value)}
            >
              {label}
            </Radio>
          ))}
        </div>
      </div>

      <div>
        <h3>Tab — Danger feedback</h3>
        <div className={hTrack}>
          {[
            ["tab-hd1", "Errors"],
            ["tab-hd2", "Warnings"],
          ].map(([value, label]) => (
            <Radio
              key={value}
              id={`react-${value}`}
              name="react-tab-hd"
              value={value}
              appearance="tab"
              feedback="danger"
              checked={tabHDanger === value}
              onChange={() => setTabHDanger(value)}
            >
              {label}
            </Radio>
          ))}
        </div>
      </div>

      <div>
        <h3>Tab — Background</h3>
        {/* Opt-in resting fill on the neutral ramp; the default is transparent. */}
        <div className={hTrack}>
          {[
            ["tab-b1", "Inbox"],
            ["tab-b2", "Archive"],
          ].map(([value, label]) => (
            <Radio
              key={value}
              id={`react-${value}`}
              name="react-tab-bg"
              value={value}
              appearance="tab"
              background="surface.peak"
              checked={tabBg === value}
              onChange={() => setTabBg(value)}
            >
              {label}
            </Radio>
          ))}
        </div>
      </div>

      <div>
        <h3>Tab — Leading and trailing slots</h3>
        {/* Tab rows are on the Control Var Contract: a leading Stamp and a
            trailing Badge size themselves to the row metrics, like Button. */}
        <div className={hTrack}>
          <Radio
            id="react-tab-s1"
            name="react-tab-slots"
            value="tab-s1"
            appearance="tab"
            checked={tabSlots === "tab-s1"}
            onChange={() => setTabSlots("tab-s1")}
            leading={
              <Stamp emphasis="ghost">
                <GitBranchIcon />
              </Stamp>
            }
            trailing={<Badge size="sm">221</Badge>}
          >
            Active
          </Radio>
          <Radio
            id="react-tab-s2"
            name="react-tab-slots"
            value="tab-s2"
            appearance="tab"
            feedback="danger"
            checked={tabSlots === "tab-s2"}
            onChange={() => setTabSlots("tab-s2")}
            leading={
              <Stamp emphasis="ghost">
                <TrashIcon />
              </Stamp>
            }
            trailing={
              <Badge size="sm" feedback="danger">
                0
              </Badge>
            }
          >
            Deleted
          </Radio>
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  import Radio from "../Radio.svelte";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideGitBranch from "@lucide/svelte/icons/git-branch";
  import LucideTrash2 from "@lucide/svelte/icons/trash-2";
  import { css } from "@pindoba/styled-system/css";
  import { stack } from "@pindoba/styled-system/patterns";

  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");

  // The 1px baseline track normally comes from a wrapping <Group> (or a
  // Navigation/TabNav strip); the demo draws it on the plain wrapper instead.
  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",
  })}`;
</script>

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

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

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

  <div>
    <h3>Tab — Background</h3>
    <!-- Opt-in resting fill on the neutral ramp; the default is transparent. -->
    <div class={hTrack}>
      <Radio
        id="svelte-tab-b1"
        value="tab-b1"
        appearance="tab"
        background="surface.peak"
        bind:group={tabBg}
      >
        Inbox
      </Radio>
      <Radio
        id="svelte-tab-b2"
        value="tab-b2"
        appearance="tab"
        background="surface.peak"
        bind:group={tabBg}
      >
        Archive
      </Radio>
    </div>
  </div>

  <div>
    <h3>Tab — Leading and trailing slots</h3>
    <!-- Tab rows are on the Control Var Contract: a leading Stamp and a
         trailing Badge size themselves to the row metrics, like Button. -->
    <div class={hTrack}>
      <Radio
        id="svelte-tab-s1"
        value="tab-s1"
        appearance="tab"
        bind:group={tabSlots}
      >
        {#snippet leading()}
          <Stamp emphasis="ghost"><LucideGitBranch /></Stamp>
        {/snippet}
        Active
        {#snippet trailing()}
          <Badge size="sm">221</Badge>
        {/snippet}
      </Radio>
      <Radio
        id="svelte-tab-s2"
        value="tab-s2"
        appearance="tab"
        feedback="danger"
        bind:group={tabSlots}
      >
        {#snippet leading()}
          <Stamp emphasis="ghost"><LucideTrash2 /></Stamp>
        {/snippet}
        Deleted
        {#snippet trailing()}
          <Badge size="sm" feedback="danger">0</Badge>
        {/snippet}
      </Radio>
    </div>
  </div>
</div>

<script setup lang="ts">
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { GitBranch, Trash } from "./_tab-icons";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
// The 1px baseline track normally comes from a wrapping <Group> (or a
// Navigation/TabNav strip); the demo draws it on the plain wrapper instead.
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 hG = ref("h1");
const vG = ref("v1");
const hdG = ref("hd1");
const sG = ref("s1");
const bG = ref("b1");
const h = [
  ["h1", "All"],
  ["h2", "Active"],
  ["h3", "Archived"],
];
const v = [
  ["v1", "Dashboard"],
  ["v2", "Settings"],
  ["v3", "Profile"],
];
const hd = [
  ["hd1", "Errors"],
  ["hd2", "Warnings"],
];
</script>

<template>
  <div :class="col">
    <div>
      <h3>Tab</h3>
      <div :class="hTrack">
        <Radio
          v-for="[val, label] in h"
          :key="val"
          :id="`vue-tab-${val}`"
          name="vue-tab-h"
          appearance="tab"
          :value="val"
          :checked="hG === val"
          @change="hG = val"
          >{{ label }}</Radio
        >
      </div>
    </div>
    <div>
      <h3>Tab — Vertical orientation</h3>
      <div :class="vTrack">
        <Radio
          v-for="[val, label] in v"
          :key="val"
          :id="`vue-tab-${val}`"
          name="vue-tab-v"
          appearance="tab"
          orientation="vertical"
          :value="val"
          :checked="vG === val"
          @change="vG = val"
          >{{ label }}</Radio
        >
      </div>
    </div>
    <div>
      <h3>Tab — Danger feedback</h3>
      <div :class="hTrack">
        <Radio
          v-for="[val, label] in hd"
          :key="val"
          :id="`vue-tab-${val}`"
          name="vue-tab-hd"
          appearance="tab"
          feedback="danger"
          :value="val"
          :checked="hdG === val"
          @change="hdG = val"
          >{{ label }}</Radio
        >
      </div>
    </div>
    <div>
      <h3>Tab — Background</h3>
      <!-- Opt-in resting fill on the neutral ramp; the default is transparent. -->
      <div :class="hTrack">
        <Radio
          v-for="[val, label] in [
            ['b1', 'Inbox'],
            ['b2', 'Archive'],
          ]"
          :key="val"
          :id="`vue-tab-${val}`"
          name="vue-tab-bg"
          appearance="tab"
          background="surface.peak"
          :value="val"
          :checked="bG === val"
          @change="bG = val"
          >{{ label }}</Radio
        >
      </div>
    </div>

    <div>
      <h3>Tab — Leading and trailing slots</h3>
      <!-- Tab rows are on the Control Var Contract: a leading Stamp and a
           trailing Badge size themselves to the row metrics, like Button. -->
      <div :class="hTrack">
        <Radio
          id="vue-tab-s1"
          name="vue-tab-slots"
          appearance="tab"
          value="s1"
          :checked="sG === 's1'"
          @change="sG = 's1'"
        >
          <template #leading>
            <Stamp emphasis="ghost"><GitBranch /></Stamp>
          </template>
          Active
          <template #trailing>
            <Badge size="sm">221</Badge>
          </template>
        </Radio>
        <Radio
          id="vue-tab-s2"
          name="vue-tab-slots"
          appearance="tab"
          feedback="danger"
          value="s2"
          :checked="sG === 's2'"
          @change="sG = 's2'"
        >
          <template #leading>
            <Stamp emphasis="ghost"><Trash /></Stamp>
          </template>
          Deleted
          <template #trailing>
            <Badge size="sm" feedback="danger">0</Badge>
          </template>
        </Radio>
      </div>
    </div>
  </div>
</template>

With Badge

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

AstroReactSvelteVue

PreviewCode

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

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

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

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

const sizes = ["sm", "md", "lg"] as const;
const labels = { sm: "Small", md: "Medium", lg: "Large" } as const;

export default function BadgeDemo() {
  const [radioGroup, setRadioGroup] = useState("react-badge-radio-md");
  const [buttonGroup, setButtonGroup] = useState("react-badge-btn-md");

  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>radio appearance</h3>
        <div
          className={stack({ gap: "sm", direction: "row", align: "center" })}
        >
          {sizes.map((size) => {
            const value = `react-badge-radio-${size}`;
            return (
              <Radio
                key={value}
                id={value}
                name="react-badge-radio"
                value={value}
                size={size}
                checked={radioGroup === value}
                onChange={() => setRadioGroup(value)}
              >
                {labels[size]}{" "}
                <Badge feedback="primary" size="sm">
                  3
                </Badge>
              </Radio>
            );
          })}
        </div>
      </div>

      <div>
        <h3>button appearance</h3>
        <div
          className={stack({ gap: "sm", direction: "row", align: "center" })}
        >
          {sizes.map((size) => {
            const value = `react-badge-btn-${size}`;
            return (
              <Radio
                key={value}
                id={value}
                name="react-badge-button"
                value={value}
                appearance="button"
                size={size}
                checked={buttonGroup === value}
                onChange={() => setButtonGroup(value)}
              >
                {labels[size]}{" "}
                <Badge feedback="primary" size="sm">
                  3
                </Badge>
              </Radio>
            );
          })}
        </div>
      </div>
    </div>
  );
}

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

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

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

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

<script setup lang="ts">
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { Badge } from "@pindoba/vue-badge";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
const row = stack({ gap: "sm", direction: "row", align: "center" });
const sizes = ["sm", "md", "lg"] as const;
const cap = (s: string) => ({ sm: "Small", md: "Medium", lg: "Large" })[s];
const radioG = ref("sm");
const buttonG = ref("sm");
</script>

<template>
  <div :class="col">
    <div>
      <h3>radio appearance</h3>
      <div :class="row">
        <Radio
          v-for="s in sizes"
          :key="s"
          :id="`vue-badge-radio-${s}`"
          name="vue-badge-radio"
          :value="s"
          :size="s"
          :checked="radioG === s"
          @change="radioG = s"
        >
          {{ cap(s) }} <Badge feedback="primary" size="sm">3</Badge>
        </Radio>
      </div>
    </div>
    <div>
      <h3>button appearance</h3>
      <div :class="row">
        <Radio
          v-for="s in sizes"
          :key="s"
          :id="`vue-badge-btn-${s}`"
          name="vue-badge-btn"
          appearance="button"
          :value="s"
          :size="s"
          :checked="buttonG === s"
          @change="buttonG = s"
        >
          {{ cap(s) }} <Badge feedback="primary" size="sm">3</Badge>
        </Radio>
      </div>
    </div>
  </div>
</template>

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.

AstroReactSvelteVue

PreviewCode

---
import Radio from "../Radio.astro";
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-lt-rbtn-${size}`}
            appearance="button"
            name="lt-demo-button"
            value={size}
            size={size}
            fullWidth
            checked={size === "md"}
          >
            <Stamp slot="leading" emphasis="adaptive" size="xs" shape="circle">
              <Mail />
            </Stamp>
            Unread
            <Badge slot="trailing" emphasis="adaptive" size="sm">
              7
            </Badge>
          </Radio>
        ))
      }
    </div>
  </div>

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

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

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

import { useState } from "react";
import { Radio } from "../Radio";
import { Badge } from "@pindoba/react-badge";
import { Stamp } from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";

const MailIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <rect width="20" height="16" x="2" y="4" rx="2" />
    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
  </svg>
);

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-lt-rbtn-${size}`}
              appearance="button"
              name="react-lt-demo-button"
              value={size}
              size={size}
              checked={buttonGroup === size}
              onChange={() => setButtonGroup(size)}
              fullWidth
              leading={
                <Stamp emphasis="adaptive" size="xs" shape="circle">
                  <MailIcon />
                </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-lt-rbtn-leading-${size}`}
              appearance="button"
              name="react-lt-demo-button-leading"
              value={size}
              size={size}
              checked={buttonLeadingGroup === size}
              onChange={() => setButtonLeadingGroup(size)}
              fullWidth
              leading={
                <Stamp emphasis="adaptive" size="xs" shape="circle">
                  <MailIcon />
                </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-lt-rbtn-trailing-${size}`}
              appearance="button"
              name="react-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-lt-r-${size}`}
              name="react-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">
  import Radio from "../Radio.svelte";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideMail from "@lucide/svelte/icons/mail";
  import { stack } from "@pindoba/styled-system/patterns";

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

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

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

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

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

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

<script setup lang="ts">
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";
import { Mail } from "./_mail";
const col = stack({ gap: "lg", direction: "column" });
const group = stack({ gap: "sm", direction: "column" });
const sizes = ["sm", "md", "lg"] as const;
const both = ref("md");
const lead = ref("md");
const trail = ref("md");
const radioG = ref("md");
</script>

<template>
  <div :class="col">
    <div>
      <h3>button appearance — both slots</h3>
      <div :class="group">
        <Radio
          v-for="s in sizes"
          :key="s"
          :id="`vue-lt-rbtn-${s}`"
          appearance="button"
          name="vue-lt-both"
          :value="s"
          :size="s"
          :checked="both === s"
          @change="both = s"
          fullWidth
        >
          <template #leading
            ><Stamp emphasis="adaptive" size="xs" shape="circle"><Mail /></Stamp
          ></template>
          Unread
          <template #trailing
            ><Badge emphasis="adaptive" size="sm">7</Badge></template
          >
        </Radio>
      </div>
    </div>
    <div>
      <h3>button appearance — leading only</h3>
      <div :class="group">
        <Radio
          v-for="s in sizes"
          :key="s"
          :id="`vue-lt-rbtn-l-${s}`"
          appearance="button"
          name="vue-lt-lead"
          :value="s"
          :size="s"
          :checked="lead === s"
          @change="lead = s"
          fullWidth
        >
          <template #leading
            ><Stamp emphasis="adaptive" size="xs" shape="circle"><Mail /></Stamp
          ></template>
          Unread
        </Radio>
      </div>
    </div>
    <div>
      <h3>button appearance — trailing only</h3>
      <div :class="group">
        <Radio
          v-for="s in sizes"
          :key="s"
          :id="`vue-lt-rbtn-t-${s}`"
          appearance="button"
          name="vue-lt-trail"
          :value="s"
          :size="s"
          :checked="trail === s"
          @change="trail = s"
          fullWidth
        >
          Unread
          <template #trailing
            ><Badge emphasis="adaptive" size="sm">7</Badge></template
          >
        </Radio>
      </div>
    </div>
    <div>
      <h3>radio appearance</h3>
      <div :class="group">
        <Radio
          v-for="s in sizes"
          :key="s"
          :id="`vue-lt-r-${s}`"
          name="vue-lt-radio"
          :value="s"
          :size="s"
          :checked="radioG === s"
          @change="radioG = s"
        >
          Pro plan
          <template #trailing
            ><Badge emphasis="adaptive" size="sm">$9/mo</Badge></template
          >
        </Radio>
      </div>
    </div>
  </div>
</template>

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.

AstroReactSvelteVue

PreviewCode

Custom root style via passThrough

Extra padding

Custom input style via passThrough

Larger indicator

Custom props via passThrough

With data attributes

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

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

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

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

Custom root style via passThrough

Extra padding

Custom input style via passThrough

Larger indicator

Custom props via passThrough

With data attributes

import { useState } from "react";
import { Radio } from "../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-cust-1"
            name="react-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-cust-2"
            name="react-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-cust-3"
            name="react-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">
  import Radio from "../Radio.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

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

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

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

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

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">
import { ref } from "vue";
import { Radio } from "@pindoba/vue-radio";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
const group = stack({ gap: "md", direction: "column" });
const sel = ref("c1");
</script>

<template>
  <div :class="col">
    <div>
      <h3>Custom root style via passThrough</h3>
      <div :class="group">
        <Radio
          id="vue-cust-1"
          name="vue-cust"
          value="c1"
          :checked="sel === 'c1'"
          @change="sel = 'c1'"
          :passThrough="{ root: { style: { gap: 'lg', padding: 'sm' } } }"
          >Extra padding</Radio
        >
      </div>
    </div>
    <div>
      <h3>Custom input style via passThrough</h3>
      <div :class="group">
        <Radio
          id="vue-cust-2"
          name="vue-cust"
          value="c2"
          :checked="sel === 'c2'"
          @change="sel = 'c2'"
          :passThrough="{ input: { style: { width: '2em', height: '2em' } } }"
          >Larger indicator</Radio
        >
      </div>
    </div>
    <div>
      <h3>Custom props via passThrough</h3>
      <div :class="group">
        <Radio
          id="vue-cust-3"
          name="vue-cust"
          value="c3"
          :checked="sel === 'c3'"
          @change="sel = 'c3'"
          :passThrough="{
            root: { props: { 'data-testid': 'my-radio' } },
            input: { props: { 'aria-label': 'Custom radio button' } },
          }"
          >With data attributes</Radio
        >
      </div>
    </div>
  </div>
</template>

#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 + feedback

#Tab

Tab

Tab — Vertical orientation

Tab — Danger feedback

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