Choice

Choice is a selection-state manager. It owns the logic of selection — single (type="radio") or multiple (type="checkbox") — and delegates the visual of each selectable item to the wrapped Radio/Checkbox (and, for the card appearance, an inner Card). Build segmented controls, selectable cards, or plain checkbox lists from one component by focusing on the action — making a choice — rather than the visual.

Each item is a <ChoiceItem> whose appearance picks the look: radio/checkbox (native indicator), button (segmented control), or card. Items coordinate through the parent automatically — selecting one radio deselects its siblings, and the group exposes the standard role="radiogroup" / role="group" semantics.

Default

A radio group rendered as a segmented control.

PreviewCode

DailyWeeklyMonthly

Selected: daily

---
// GENERATED from packages/demos/choice/default.demo.tsx — edit the source, not this file.
import Choice from "@pindoba/astro-choice";
import { ChoiceItem } from "@pindoba/astro-choice";

const value = ["daily"] as string[];
---

<Choice type="radio" data-ir-root="choice/default" data-ir="1">
  <ChoiceItem value="daily" label="Daily" type="radio" checked />
  <ChoiceItem value="weekly" label="Weekly" type="radio" />
  <ChoiceItem value="monthly" label="Monthly" type="radio" />
</Choice>

<p data-ir-root="choice/default">
  Selected: <!--ir:2-->
  {value.join(", ") || "none"}
  <!--/ir-->
</p>

<script>
  import { hydrate } from "./_client/default.ts";

  const roots = [
    ...document.querySelectorAll('[data-ir-root="choice/default"]'),
  ];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

DailyWeeklyMonthly

Selected: daily

// GENERATED from packages/demos/choice/default.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Choice, ChoiceItem } from "@pindoba/react-choice";

export default function DefaultDemo() {
  const [value, setValue] = useState(["daily"] as string[]);
  return (
    <>
      <Choice type="radio" value={value} onValueChange={setValue}>
        <ChoiceItem value="daily" label="Daily" />
        <ChoiceItem value="weekly" label="Weekly" />
        <ChoiceItem value="monthly" label="Monthly" />
      </Choice>

      <p>Selected: {value.join(", ") || "none"}</p>
    </>
  );
}

Daily Weekly Monthly

Selected: daily

<script lang="ts">
  // GENERATED from packages/demos/choice/default.demo.tsx — edit the source, not this file.
  import Choice from "@pindoba/svelte-choice";
  import { ChoiceItem } from "@pindoba/svelte-choice";

  let value = $state(["daily"] as string[]);
</script>

<Choice type="radio" bind:value>
  <ChoiceItem value="daily" label="Daily"></ChoiceItem>
  <ChoiceItem value="weekly" label="Weekly"></ChoiceItem>
  <ChoiceItem value="monthly" label="Monthly"></ChoiceItem>
</Choice>

<p>
  Selected: {value.join(", ") || "none"}
</p>

DailyWeeklyMonthly

Selected: daily

<script setup lang="ts">
// GENERATED from packages/demos/choice/default.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Choice, ChoiceItem } from "@pindoba/vue-choice";

const value = ref(["daily"] as string[]);
</script>

<template>
  <Choice
    type="radio"
    :value="value"
    :onValueChange="(next: string[]) => (value = next)"
  >
    <ChoiceItem value="daily" label="Daily"></ChoiceItem>
    <ChoiceItem value="weekly" label="Weekly"></ChoiceItem>
    <ChoiceItem value="monthly" label="Monthly"></ChoiceItem>
  </Choice>

  <p>Selected: {{ value.join(", ") || "none" }}</p>
</template>

DailyWeeklyMonthly

Selected: daily

// GENERATED from packages/demos/choice/default.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Choice, ChoiceItem } from "@pindoba/solid-choice";

export default function DefaultDemo() {
  const [value, setValue] = createSignal(["daily"] as string[]);
  return (
    <>
      <Choice type="radio" value={value()} onValueChange={setValue}>
        <ChoiceItem value="daily" label="Daily" />
        <ChoiceItem value="weekly" label="Weekly" />
        <ChoiceItem value="monthly" label="Monthly" />
      </Choice>

      <p>Selected: {value().join(", ") || "none"}</p>
    </>
  );
}

Segmented control

type="radio" with appearance="button". Use tone to color the active state. Seed the initial selection with defaultValue (uncontrolled) or bind value (controlled).

The selection is a single thumb that slides between segments, in either orientation. It’s pure CSS (anchor positioning), so it works the same in every framework, Astro included, and it’s skipped under reduced motion. Browsers without anchor positioning fall back to each segment filling itself. Pass thumb={false} to keep that static fill everywhere. The thumb is off for a merged group and for checkbox groups. It paints the selected segment’s tone/emphasis, which is the group’s unless that item sets its own.

PreviewCode

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

<div class={stack({ gap: "lg", direction: "column" })}>
  <Choice type="radio" appearance="button" tone="primary">
    <ChoiceItem
      value="list"
      label="List"
      type="radio"
      appearance="button"
      tone="primary"
      checked
    />
    <ChoiceItem
      value="board"
      label="Board"
      type="radio"
      appearance="button"
      tone="primary"
    />
    <ChoiceItem
      value="calendar"
      label="Calendar"
      type="radio"
      appearance="button"
      tone="primary"
    />
  </Choice>

  <Choice type="radio" appearance="button" tone="success">
    <ChoiceItem
      value="s"
      label="Small"
      type="radio"
      appearance="button"
      tone="success"
    />
    <ChoiceItem
      value="m"
      label="Medium"
      type="radio"
      appearance="button"
      tone="success"
      checked
    />
    <ChoiceItem
      value="l"
      label="Large"
      type="radio"
      appearance="button"
      tone="success"
    />
  </Choice>

  <Choice type="radio" appearance="button" orientation="vertical">
    <ChoiceItem
      value="inbox"
      label="Inbox"
      type="radio"
      appearance="button"
      checked
    />
    <ChoiceItem
      value="drafts"
      label="Drafts"
      type="radio"
      appearance="button"
    />
    <ChoiceItem
      value="archive"
      label="Archive"
      type="radio"
      appearance="button"
    />
  </Choice>

  <Choice type="radio" appearance="button" thumb={false}>
    <ChoiceItem
      value="a"
      label="Static"
      type="radio"
      appearance="button"
      checked
    />
    <ChoiceItem value="b" label="Fill" type="radio" appearance="button" />
    <ChoiceItem value="c" label="Only" type="radio" appearance="button" />
  </Choice>
</div>

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

export default function SegmentedDemo() {
  const [view, setView] = useState(["list"] as string[]);
  return (
    <div className={stack({ gap: "lg", direction: "column" })}>
      <Choice
        type="radio"
        appearance="button"
        tone="primary"
        value={view}
        onValueChange={setView}
      >
        <ChoiceItem value="list" label="List" />
        <ChoiceItem value="board" label="Board" />
        <ChoiceItem value="calendar" label="Calendar" />
      </Choice>

      <Choice
        type="radio"
        appearance="button"
        tone="success"
        defaultValue={["m"]}
      >
        <ChoiceItem value="s" label="Small" />
        <ChoiceItem value="m" label="Medium" />
        <ChoiceItem value="l" label="Large" />
      </Choice>

      <Choice
        type="radio"
        appearance="button"
        orientation="vertical"
        defaultValue={["inbox"]}
      >
        <ChoiceItem value="inbox" label="Inbox" />
        <ChoiceItem value="drafts" label="Drafts" />
        <ChoiceItem value="archive" label="Archive" />
      </Choice>

      <Choice
        type="radio"
        appearance="button"
        thumb={false}
        defaultValue={["a"]}
      >
        <ChoiceItem value="a" label="Static" />
        <ChoiceItem value="b" label="Fill" />
        <ChoiceItem value="c" label="Only" />
      </Choice>
    </div>
  );
}

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

  let view = $state(["list"] as string[]);
</script>

<div class={stack({ gap: "lg", direction: "column" })}>
  <Choice type="radio" appearance="button" tone="primary" bind:value={view}>
    <ChoiceItem value="list" label="List"></ChoiceItem>
    <ChoiceItem value="board" label="Board"></ChoiceItem>
    <ChoiceItem value="calendar" label="Calendar"></ChoiceItem>
  </Choice>

  <Choice type="radio" appearance="button" tone="success" defaultValue={["m"]}>
    <ChoiceItem value="s" label="Small"></ChoiceItem>
    <ChoiceItem value="m" label="Medium"></ChoiceItem>
    <ChoiceItem value="l" label="Large"></ChoiceItem>
  </Choice>

  <Choice
    type="radio"
    appearance="button"
    orientation="vertical"
    defaultValue={["inbox"]}
  >
    <ChoiceItem value="inbox" label="Inbox"></ChoiceItem>
    <ChoiceItem value="drafts" label="Drafts"></ChoiceItem>
    <ChoiceItem value="archive" label="Archive"></ChoiceItem>
  </Choice>

  <Choice type="radio" appearance="button" thumb={false} defaultValue={["a"]}>
    <ChoiceItem value="a" label="Static"></ChoiceItem>
    <ChoiceItem value="b" label="Fill"></ChoiceItem>
    <ChoiceItem value="c" label="Only"></ChoiceItem>
  </Choice>
</div>

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

const view = ref(["list"] as string[]);
</script>

<template>
  <div :class="stack({ gap: 'lg', direction: 'column' })">
    <Choice
      type="radio"
      appearance="button"
      tone="primary"
      :value="view"
      :onValueChange="(next: string[]) => (view = next)"
    >
      <ChoiceItem value="list" label="List"></ChoiceItem>
      <ChoiceItem value="board" label="Board"></ChoiceItem>
      <ChoiceItem value="calendar" label="Calendar"></ChoiceItem>
    </Choice>

    <Choice
      type="radio"
      appearance="button"
      tone="success"
      :defaultValue="['m']"
    >
      <ChoiceItem value="s" label="Small"></ChoiceItem>
      <ChoiceItem value="m" label="Medium"></ChoiceItem>
      <ChoiceItem value="l" label="Large"></ChoiceItem>
    </Choice>

    <Choice
      type="radio"
      appearance="button"
      orientation="vertical"
      :defaultValue="['inbox']"
    >
      <ChoiceItem value="inbox" label="Inbox"></ChoiceItem>
      <ChoiceItem value="drafts" label="Drafts"></ChoiceItem>
      <ChoiceItem value="archive" label="Archive"></ChoiceItem>
    </Choice>

    <Choice
      type="radio"
      appearance="button"
      :thumb="false"
      :defaultValue="['a']"
    >
      <ChoiceItem value="a" label="Static"></ChoiceItem>
      <ChoiceItem value="b" label="Fill"></ChoiceItem>
      <ChoiceItem value="c" label="Only"></ChoiceItem>
    </Choice>
  </div>
</template>

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

export default function SegmentedDemo() {
  const [view, setView] = createSignal(["list"] as string[]);
  return (
    <div class={stack({ gap: "lg", direction: "column" })}>
      <Choice
        type="radio"
        appearance="button"
        tone="primary"
        value={view()}
        onValueChange={setView}
      >
        <ChoiceItem value="list" label="List" />
        <ChoiceItem value="board" label="Board" />
        <ChoiceItem value="calendar" label="Calendar" />
      </Choice>

      <Choice
        type="radio"
        appearance="button"
        tone="success"
        defaultValue={["m"]}
      >
        <ChoiceItem value="s" label="Small" />
        <ChoiceItem value="m" label="Medium" />
        <ChoiceItem value="l" label="Large" />
      </Choice>

      <Choice
        type="radio"
        appearance="button"
        orientation="vertical"
        defaultValue={["inbox"]}
      >
        <ChoiceItem value="inbox" label="Inbox" />
        <ChoiceItem value="drafts" label="Drafts" />
        <ChoiceItem value="archive" label="Archive" />
      </Choice>

      <Choice
        type="radio"
        appearance="button"
        thumb={false}
        defaultValue={["a"]}
      >
        <ChoiceItem value="a" label="Static" />
        <ChoiceItem value="b" label="Fill" />
        <ChoiceItem value="c" label="Only" />
      </Choice>
    </div>
  );
}

A segment with its own colorway

Set tone / emphasis on one ChoiceItem to set it apart. A destructive option, say: the thumb turns into a solid danger fill only while that segment is selected, and the rest of the track stays in the group’s colorway.

PreviewCode

Move to TrashDelete permanently

---
// GENERATED from packages/demos/choice/thumb-item-tone.demo.tsx — edit the source, not this file.
import Choice from "@pindoba/astro-choice";
import { ChoiceItem } from "@pindoba/astro-choice";
---

<Choice type="radio" appearance="button" size="sm" aria-label="Deletion method">
  <ChoiceItem
    value="trash"
    label="Move to Trash"
    type="radio"
    appearance="button"
    size="sm"
    checked
  />
  <ChoiceItem
    value="permanent"
    label="Delete permanently"
    tone="danger"
    emphasis="primary"
    type="radio"
    appearance="button"
    size="sm"
  />
</Choice>

Move to TrashDelete permanently

// GENERATED from packages/demos/choice/thumb-item-tone.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Choice, ChoiceItem } from "@pindoba/react-choice";

export default function ThumbItemToneDemo() {
  const [mode, setMode] = useState(["trash"] as string[]);
  return (
    <Choice
      type="radio"
      appearance="button"
      size="sm"
      aria-label="Deletion method"
      value={mode}
      onValueChange={setMode}
    >
      <ChoiceItem value="trash" label="Move to Trash" />
      <ChoiceItem
        value="permanent"
        label="Delete permanently"
        tone="danger"
        emphasis="primary"
      />
    </Choice>
  );
}

Move to Trash Delete permanently

<script lang="ts">
  // GENERATED from packages/demos/choice/thumb-item-tone.demo.tsx — edit the source, not this file.
  import Choice from "@pindoba/svelte-choice";
  import { ChoiceItem } from "@pindoba/svelte-choice";

  let mode = $state(["trash"] as string[]);
</script>

<Choice
  type="radio"
  appearance="button"
  size="sm"
  aria-label="Deletion method"
  bind:value={mode}
>
  <ChoiceItem value="trash" label="Move to Trash"></ChoiceItem>
  <ChoiceItem
    value="permanent"
    label="Delete permanently"
    tone="danger"
    emphasis="primary"
  ></ChoiceItem>
</Choice>

Move to TrashDelete permanently

<script setup lang="ts">
// GENERATED from packages/demos/choice/thumb-item-tone.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Choice, ChoiceItem } from "@pindoba/vue-choice";

const mode = ref(["trash"] as string[]);
</script>

<template>
  <Choice
    type="radio"
    appearance="button"
    size="sm"
    aria-label="Deletion method"
    :value="mode"
    :onValueChange="(next: string[]) => (mode = next)"
  >
    <ChoiceItem value="trash" label="Move to Trash"></ChoiceItem>
    <ChoiceItem
      value="permanent"
      label="Delete permanently"
      tone="danger"
      emphasis="primary"
    ></ChoiceItem>
  </Choice>
</template>

Move to TrashDelete permanently

// GENERATED from packages/demos/choice/thumb-item-tone.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Choice, ChoiceItem } from "@pindoba/solid-choice";

export default function ThumbItemToneDemo() {
  const [mode, setMode] = createSignal(["trash"] as string[]);
  return (
    <Choice
      type="radio"
      appearance="button"
      size="sm"
      aria-label="Deletion method"
      value={mode()}
      onValueChange={setMode}
    >
      <ChoiceItem value="trash" label="Move to Trash" />
      <ChoiceItem
        value="permanent"
        label="Delete permanently"
        tone="danger"
        emphasis="primary"
      />
    </Choice>
  );
}

Sizes

size (sm / md / lg) scales the items — and the container’s padding and the gap between items (which are always equal) shrink with it too. The container radius scales in step, so the items’ corners stay concentric inside it at every size. In Svelte the size set on <Choice> cascades to every <ChoiceItem>; in Astro (no runtime context) set size on each <ChoiceItem> as well.

PreviewCode

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

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

<div class={stack({ gap: "lg", direction: "column", align: "start" })}>
  {sizes.map((size) => (
    <Choice type="radio" appearance="button" tone="primary" size={size}>
      <ChoiceItem
        value="s"
        label="Small"
        type="radio"
        appearance="button"
        tone="primary"
        size={size}
      />
      <ChoiceItem
        value="m"
        label="Medium"
        type="radio"
        appearance="button"
        tone="primary"
        size={size}
        checked
      />
      <ChoiceItem
        value="l"
        label="Large"
        type="radio"
        appearance="button"
        tone="primary"
        size={size}
      />
    </Choice>
  ))}
</div>

// GENERATED from packages/demos/choice/sizes.demo.tsx — edit the source, not this file.
import { Choice, ChoiceItem } from "@pindoba/react-choice";
import { stack } from "@pindoba/styled-system/patterns";

const sizes = ["sm", "md", "lg"] as const;
export default function SizesDemo() {
  return (
    <div className={stack({ gap: "lg", direction: "column", align: "start" })}>
      {sizes.map((size) => (
        <Choice
          key={size}
          type="radio"
          appearance="button"
          tone="primary"
          size={size}
          defaultValue={["m"]}
        >
          <ChoiceItem value="s" label="Small" />
          <ChoiceItem value="m" label="Medium" />
          <ChoiceItem value="l" label="Large" />
        </Choice>
      ))}
    </div>
  );
}

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

  const sizes = ["sm", "md", "lg"] as const;
</script>

<div class={stack({ gap: "lg", direction: "column", align: "start" })}>
  {#each sizes as size (size)}
    <Choice
      type="radio"
      appearance="button"
      tone="primary"
      {size}
      defaultValue={["m"]}
    >
      <ChoiceItem value="s" label="Small"></ChoiceItem>
      <ChoiceItem value="m" label="Medium"></ChoiceItem>
      <ChoiceItem value="l" label="Large"></ChoiceItem>
    </Choice>
  {/each}
</div>

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

const sizes = ["sm", "md", "lg"] as const;
</script>

<template>
  <div :class="stack({ gap: 'lg', direction: 'column', align: 'start' })">
    <Choice
      v-for="size in sizes"
      :key="size"
      type="radio"
      appearance="button"
      tone="primary"
      :size="size"
      :defaultValue="['m']"
    >
      <ChoiceItem value="s" label="Small"></ChoiceItem>
      <ChoiceItem value="m" label="Medium"></ChoiceItem>
      <ChoiceItem value="l" label="Large"></ChoiceItem>
    </Choice>
  </div>
</template>

// GENERATED from packages/demos/choice/sizes.demo.tsx — edit the source, not this file.
import { For } from "solid-js";
import { Choice, ChoiceItem } from "@pindoba/solid-choice";
import { stack } from "@pindoba/styled-system/patterns";

const sizes = ["sm", "md", "lg"] as const;
export default function SizesDemo() {
  return (
    <div class={stack({ gap: "lg", direction: "column", align: "start" })}>
      <For each={sizes}>
        {(size) => (
          <Choice
            type="radio"
            appearance="button"
            tone="primary"
            size={size}
            defaultValue={["m"]}
          >
            <ChoiceItem value="s" label="Small" />
            <ChoiceItem value="m" label="Medium" />
            <ChoiceItem value="l" label="Large" />
          </Choice>
        )}
      </For>
    </div>
  );
}

Affixes

Button-appearance items take leading / trailing affix content, forwarded to the wrapped Radio/Checkbox — an icon <Stamp emphasis="ghost">, a <Badge> count. Each segment rounds like a standalone control of the same size, so its affixes nest concentrically inside it. Pass them as leading/trailing on an items entry, as snippets (Svelte) or as slot="leading" / slot="trailing" children (Astro).

PreviewCode

---
// GENERATED from packages/demos/choice/affixes.demo.tsx — edit the source, not this file.
import Choice from "@pindoba/astro-choice";
import { ChoiceItem } from "@pindoba/astro-choice";
import Stamp from "@pindoba/astro-stamp";
import Badge from "@pindoba/astro-badge";
import { List, LayoutGrid, Calendar } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

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

<div class={stack({ gap: "lg", direction: "column", align: "start" })}>
  {sizes.map((size) => (
    <Choice type="radio" appearance="button" tone="primary" size={size}>
      <ChoiceItem
        value="list"
        label="List"
        type="radio"
        appearance="button"
        tone="primary"
        size={size}
      >
        <Stamp slot="leading" emphasis="ghost">
          <List />
        </Stamp>
      </ChoiceItem>
      <ChoiceItem
        value="board"
        label="Board"
        type="radio"
        appearance="button"
        tone="primary"
        size={size}
        checked
      >
        <Stamp slot="leading" emphasis="ghost">
          <LayoutGrid />
        </Stamp>
        <Badge slot="trailing">3</Badge>
      </ChoiceItem>
      <ChoiceItem
        value="calendar"
        label="Calendar"
        type="radio"
        appearance="button"
        tone="primary"
        size={size}
      >
        <Stamp slot="leading" emphasis="ghost">
          <Calendar />
        </Stamp>
      </ChoiceItem>
    </Choice>
  ))}
</div>

// GENERATED from packages/demos/choice/affixes.demo.tsx — edit the source, not this file.
import { Choice, ChoiceItem } from "@pindoba/react-choice";
import { Stamp } from "@pindoba/react-stamp";
import { Badge } from "@pindoba/react-badge";
import { List } from "lucide-react";
import { LayoutGrid } from "lucide-react";
import { Calendar } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";

const sizes = ["sm", "md", "lg"] as const;
export default function AffixesDemo() {
  return (
    <div className={stack({ gap: "lg", direction: "column", align: "start" })}>
      {sizes.map((size) => (
        <Choice
          key={size}
          type="radio"
          appearance="button"
          tone="primary"
          size={size}
          defaultValue={["board"]}
        >
          <ChoiceItem
            value="list"
            label="List"
            leading={
              <Stamp emphasis="ghost">
                <List />
              </Stamp>
            }
          />
          <ChoiceItem
            value="board"
            label="Board"
            leading={
              <Stamp emphasis="ghost">
                <LayoutGrid />
              </Stamp>
            }
            trailing={<Badge>3</Badge>}
          />
          <ChoiceItem
            value="calendar"
            label="Calendar"
            leading={
              <Stamp emphasis="ghost">
                <Calendar />
              </Stamp>
            }
          />
        </Choice>
      ))}
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/choice/affixes.demo.tsx — edit the source, not this file.
  import Choice from "@pindoba/svelte-choice";
  import { ChoiceItem } from "@pindoba/svelte-choice";
  import Stamp from "@pindoba/svelte-stamp";
  import Badge from "@pindoba/svelte-badge";
  import LucideList from "@lucide/svelte/icons/list";
  import LucideLayoutGrid from "@lucide/svelte/icons/layout-grid";
  import LucideCalendar from "@lucide/svelte/icons/calendar";
  import { stack } from "@pindoba/styled-system/patterns";

  const sizes = ["sm", "md", "lg"] as const;
</script>

<div class={stack({ gap: "lg", direction: "column", align: "start" })}>
  {#each sizes as size (size)}
    <Choice
      type="radio"
      appearance="button"
      tone="primary"
      {size}
      defaultValue={["board"]}
    >
      <ChoiceItem value="list" label="List">
        {#snippet leading()}
          <Stamp emphasis="ghost">
            <LucideList />
          </Stamp>
        {/snippet}
      </ChoiceItem>
      <ChoiceItem value="board" label="Board">
        {#snippet leading()}
          <Stamp emphasis="ghost">
            <LucideLayoutGrid />
          </Stamp>
        {/snippet}
        {#snippet trailing()}
          <Badge>3</Badge>
        {/snippet}
      </ChoiceItem>
      <ChoiceItem value="calendar" label="Calendar">
        {#snippet leading()}
          <Stamp emphasis="ghost">
            <LucideCalendar />
          </Stamp>
        {/snippet}
      </ChoiceItem>
    </Choice>
  {/each}
</div>

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

const sizes = ["sm", "md", "lg"] as const;
</script>

<template>
  <div :class="stack({ gap: 'lg', direction: 'column', align: 'start' })">
    <Choice
      v-for="size in sizes"
      :key="size"
      type="radio"
      appearance="button"
      tone="primary"
      :size="size"
      :defaultValue="['board']"
    >
      <ChoiceItem value="list" label="List">
        <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-list"
              aria-hidden="true"
            >
              <path d="M3 5h.01" />
              <path d="M3 12h.01" />
              <path d="M3 19h.01" />
              <path d="M8 5h13" />
              <path d="M8 12h13" />
              <path d="M8 19h13" />
            </svg>
          </Stamp>
        </template>
      </ChoiceItem>
      <ChoiceItem value="board" label="Board">
        <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-layout-grid"
              aria-hidden="true"
            >
              <rect width="7" height="7" x="3" y="3" rx="1" />
              <rect width="7" height="7" x="14" y="3" rx="1" />
              <rect width="7" height="7" x="14" y="14" rx="1" />
              <rect width="7" height="7" x="3" y="14" rx="1" />
            </svg>
          </Stamp>
        </template>
        <template #trailing>
          <Badge>3</Badge>
        </template>
      </ChoiceItem>
      <ChoiceItem value="calendar" label="Calendar">
        <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-calendar"
              aria-hidden="true"
            >
              <path d="M8 2v3" />
              <path d="M16 2v3" />
              <rect x="3" y="3" width="18" height="18" rx="2" />
              <path d="M3 9h18" />
            </svg>
          </Stamp>
        </template>
      </ChoiceItem>
    </Choice>
  </div>
</template>

// GENERATED from packages/demos/choice/affixes.demo.tsx — edit the source, not this file.
import { For } from "solid-js";
import { Choice, ChoiceItem } from "@pindoba/solid-choice";
import { Stamp } from "@pindoba/solid-stamp";
import { Badge } from "@pindoba/solid-badge";
import { stack } from "@pindoba/styled-system/patterns";

const sizes = ["sm", "md", "lg"] as const;
export default function AffixesDemo() {
  return (
    <div class={stack({ gap: "lg", direction: "column", align: "start" })}>
      <For each={sizes}>
        {(size) => (
          <Choice
            type="radio"
            appearance="button"
            tone="primary"
            size={size}
            defaultValue={["board"]}
          >
            <ChoiceItem
              value="list"
              label="List"
              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-list"
                    aria-hidden="true"
                  >
                    <path d="M3 5h.01" />
                    <path d="M3 12h.01" />
                    <path d="M3 19h.01" />
                    <path d="M8 5h13" />
                    <path d="M8 12h13" />
                    <path d="M8 19h13" />
                  </svg>
                </Stamp>
              }
            />
            <ChoiceItem
              value="board"
              label="Board"
              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-layout-grid"
                    aria-hidden="true"
                  >
                    <rect width="7" height="7" x="3" y="3" rx="1" />
                    <rect width="7" height="7" x="14" y="3" rx="1" />
                    <rect width="7" height="7" x="14" y="14" rx="1" />
                    <rect width="7" height="7" x="3" y="14" rx="1" />
                  </svg>
                </Stamp>
              }
              trailing={<Badge>3</Badge>}
            />
            <ChoiceItem
              value="calendar"
              label="Calendar"
              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-calendar"
                    aria-hidden="true"
                  >
                    <path d="M8 2v3" />
                    <path d="M16 2v3" />
                    <rect x="3" y="3" width="18" height="18" rx="2" />
                    <path d="M3 9h18" />
                  </svg>
                </Stamp>
              }
            />
          </Choice>
        )}
      </For>
    </div>
  );
}

Emphasis

emphasis (primary / secondary / tertiary) tunes the control treatment. Set on <Choice> it cascades to every item (Svelte); in Astro set it per <ChoiceItem>.

PreviewCode

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

const emphases = ["primary", "secondary", "tertiary"] as const;
---

<div class={stack({ gap: "lg", direction: "column", align: "start" })}>
  {emphases.map((emphasis) => (
    <Choice type="radio" appearance="button" tone="primary" emphasis={emphasis}>
      <ChoiceItem
        value="day"
        label="Day"
        type="radio"
        appearance="button"
        tone="primary"
        emphasis={emphasis}
      />
      <ChoiceItem
        value="week"
        label="Week"
        type="radio"
        appearance="button"
        tone="primary"
        emphasis={emphasis}
        checked
      />
      <ChoiceItem
        value="month"
        label="Month"
        type="radio"
        appearance="button"
        tone="primary"
        emphasis={emphasis}
      />
    </Choice>
  ))}
</div>

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

const emphases = ["primary", "secondary", "tertiary"] as const;
export default function EmphasisDemo() {
  return (
    <div className={stack({ gap: "lg", direction: "column", align: "start" })}>
      {emphases.map((emphasis) => (
        <Choice
          key={emphasis}
          type="radio"
          appearance="button"
          tone="primary"
          emphasis={emphasis}
          defaultValue={["week"]}
        >
          <ChoiceItem value="day" label="Day" />
          <ChoiceItem value="week" label="Week" />
          <ChoiceItem value="month" label="Month" />
        </Choice>
      ))}
    </div>
  );
}

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

  const emphases = ["primary", "secondary", "tertiary"] as const;
</script>

<div class={stack({ gap: "lg", direction: "column", align: "start" })}>
  {#each emphases as emphasis (emphasis)}
    <Choice
      type="radio"
      appearance="button"
      tone="primary"
      {emphasis}
      defaultValue={["week"]}
    >
      <ChoiceItem value="day" label="Day"></ChoiceItem>
      <ChoiceItem value="week" label="Week"></ChoiceItem>
      <ChoiceItem value="month" label="Month"></ChoiceItem>
    </Choice>
  {/each}
</div>

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

const emphases = ["primary", "secondary", "tertiary"] as const;
</script>

<template>
  <div :class="stack({ gap: 'lg', direction: 'column', align: 'start' })">
    <Choice
      v-for="emphasis in emphases"
      :key="emphasis"
      type="radio"
      appearance="button"
      tone="primary"
      :emphasis="emphasis"
      :defaultValue="['week']"
    >
      <ChoiceItem value="day" label="Day"></ChoiceItem>
      <ChoiceItem value="week" label="Week"></ChoiceItem>
      <ChoiceItem value="month" label="Month"></ChoiceItem>
    </Choice>
  </div>
</template>

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

const emphases = ["primary", "secondary", "tertiary"] as const;
export default function EmphasisDemo() {
  return (
    <div class={stack({ gap: "lg", direction: "column", align: "start" })}>
      <For each={emphases}>
        {(emphasis) => (
          <Choice
            type="radio"
            appearance="button"
            tone="primary"
            emphasis={emphasis}
            defaultValue={["week"]}
          >
            <ChoiceItem value="day" label="Day" />
            <ChoiceItem value="week" label="Week" />
            <ChoiceItem value="month" label="Month" />
          </Choice>
        )}
      </For>
    </div>
  );
}

Tone

tone (neutral / primary / success / warning / danger) colors the selected state. Like emphasis, it cascades from <Choice> in Svelte and is set per item in Astro.

PreviewCode

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

const feedbacks = [
  "neutral",
  "primary",
  "success",
  "warning",
  "danger",
] as const;
---

<div class={stack({ gap: "lg", direction: "column", align: "start" })}>
  {feedbacks.map((tone) => (
    <Choice type="radio" appearance="button" tone={tone}>
      <ChoiceItem
        value="a"
        label="Low"
        type="radio"
        appearance="button"
        tone={tone}
      />
      <ChoiceItem
        value="b"
        label="Medium"
        type="radio"
        appearance="button"
        tone={tone}
        checked
      />
      <ChoiceItem
        value="c"
        label="High"
        type="radio"
        appearance="button"
        tone={tone}
      />
    </Choice>
  ))}
</div>

// GENERATED from packages/demos/choice/tone.demo.tsx — edit the source, not this file.
import { Choice, ChoiceItem } from "@pindoba/react-choice";
import { stack } from "@pindoba/styled-system/patterns";

const feedbacks = [
  "neutral",
  "primary",
  "success",
  "warning",
  "danger",
] as const;
export default function ToneDemo() {
  return (
    <div className={stack({ gap: "lg", direction: "column", align: "start" })}>
      {feedbacks.map((tone) => (
        <Choice
          key={tone}
          type="radio"
          appearance="button"
          tone={tone}
          defaultValue={["b"]}
        >
          <ChoiceItem value="a" label="Low" />
          <ChoiceItem value="b" label="Medium" />
          <ChoiceItem value="c" label="High" />
        </Choice>
      ))}
    </div>
  );
}

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

const feedbacks = [
  "neutral",
  "primary",
  "success",
  "warning",
  "danger",
] as const;
</script>

<template>
  <div :class="stack({ gap: 'lg', direction: 'column', align: 'start' })">
    <Choice
      v-for="tone in feedbacks"
      :key="tone"
      type="radio"
      appearance="button"
      :tone="tone"
      :defaultValue="['b']"
    >
      <ChoiceItem value="a" label="Low"></ChoiceItem>
      <ChoiceItem value="b" label="Medium"></ChoiceItem>
      <ChoiceItem value="c" label="High"></ChoiceItem>
    </Choice>
  </div>
</template>

// GENERATED from packages/demos/choice/tone.demo.tsx — edit the source, not this file.
import { For } from "solid-js";
import { Choice, ChoiceItem } from "@pindoba/solid-choice";
import { stack } from "@pindoba/styled-system/patterns";

const feedbacks = [
  "neutral",
  "primary",
  "success",
  "warning",
  "danger",
] as const;
export default function ToneDemo() {
  return (
    <div class={stack({ gap: "lg", direction: "column", align: "start" })}>
      <For each={feedbacks}>
        {(tone) => (
          <Choice
            type="radio"
            appearance="button"
            tone={tone}
            defaultValue={["b"]}
          >
            <ChoiceItem value="a" label="Low" />
            <ChoiceItem value="b" label="Medium" />
            <ChoiceItem value="c" label="High" />
          </Choice>
        )}
      </For>
    </div>
  );
}

Orientation & columns

orientation is horizontal (default, wraps) or vertical. For a responsive multi-column layout — especially with cards — set columns: a number lays the items out in that many equal columns, and "auto" makes a responsive auto-fit grid that reflows to fill the available width.

PreviewCode

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

const plans = [
  { value: "basic", heading: "Basic", subheading: "$0/mo" },
  { value: "pro", heading: "Pro", subheading: "$12/mo" },
  { value: "team", heading: "Team", subheading: "$29/mo" },
];
const features = [
  { value: "ssl", heading: "SSL", subheading: "Encrypted traffic" },
  { value: "cdn", heading: "CDN", subheading: "Global edge cache" },
  { value: "backups", heading: "Backups", subheading: "Daily snapshots" },
  { value: "analytics", heading: "Analytics", subheading: "Usage insights" },
];
---

<div class={stack({ gap: "xl", direction: "column" })}>
  <Choice type="radio" appearance="card" size="sm" columns={3} tone="primary">
    {plans.map((p) => (
      <ChoiceItem
        value={p.value}
        header={{ heading: p.heading, subheading: p.subheading }}
        type="radio"
        appearance="card"
        size="sm"
        tone="primary"
        checked={(["pro"] as string[]).includes(p.value)}
      />
    ))}
  </Choice>

  <Choice
    type="checkbox"
    appearance="card"
    size="sm"
    columns="auto"
    tone="success"
  >
    {features.map((f) => (
      <ChoiceItem
        value={f.value}
        header={{ heading: f.heading, subheading: f.subheading }}
        type="checkbox"
        appearance="card"
        size="sm"
        tone="success"
        checked={(["ssl"] as string[]).includes(f.value)}
      />
    ))}
  </Choice>
</div>

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

const plans = [
  { value: "basic", heading: "Basic", subheading: "$0/mo" },
  { value: "pro", heading: "Pro", subheading: "$12/mo" },
  { value: "team", heading: "Team", subheading: "$29/mo" },
];
const features = [
  { value: "ssl", heading: "SSL", subheading: "Encrypted traffic" },
  { value: "cdn", heading: "CDN", subheading: "Global edge cache" },
  { value: "backups", heading: "Backups", subheading: "Daily snapshots" },
  { value: "analytics", heading: "Analytics", subheading: "Usage insights" },
];
export default function ColumnsDemo() {
  const [plan, setPlan] = useState(["pro"] as string[]);
  const [addons, setAddons] = useState(["ssl"] as string[]);
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <Choice
        type="radio"
        appearance="card"
        size="sm"
        columns={3}
        tone="primary"
        value={plan}
        onValueChange={setPlan}
      >
        {plans.map((p) => (
          <ChoiceItem
            key={p.value}
            value={p.value}
            header={{ heading: p.heading, subheading: p.subheading }}
          />
        ))}
      </Choice>

      <Choice
        type="checkbox"
        appearance="card"
        size="sm"
        columns="auto"
        tone="success"
        value={addons}
        onValueChange={setAddons}
      >
        {features.map((f) => (
          <ChoiceItem
            key={f.value}
            value={f.value}
            header={{ heading: f.heading, subheading: f.subheading }}
          />
        ))}
      </Choice>
    </div>
  );
}

Basic

$0/mo

Pro

$12/mo

Team

$29/mo

SSL

Encrypted traffic

CDN

Global edge cache

Backups

Daily snapshots

Analytics

Usage insights

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

  const plans = [
    { value: "basic", heading: "Basic", subheading: "$0/mo" },
    { value: "pro", heading: "Pro", subheading: "$12/mo" },
    { value: "team", heading: "Team", subheading: "$29/mo" },
  ];
  const features = [
    { value: "ssl", heading: "SSL", subheading: "Encrypted traffic" },
    { value: "cdn", heading: "CDN", subheading: "Global edge cache" },
    { value: "backups", heading: "Backups", subheading: "Daily snapshots" },
    { value: "analytics", heading: "Analytics", subheading: "Usage insights" },
  ];

  let plan = $state(["pro"] as string[]);
  let addons = $state(["ssl"] as string[]);
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <Choice
    type="radio"
    appearance="card"
    size="sm"
    columns={3}
    tone="primary"
    bind:value={plan}
  >
    {#each plans as p (p.value)}
      <ChoiceItem
        value={p.value}
        header={{ heading: p.heading, subheading: p.subheading }}
      ></ChoiceItem>
    {/each}
  </Choice>

  <Choice
    type="checkbox"
    appearance="card"
    size="sm"
    columns="auto"
    tone="success"
    bind:value={addons}
  >
    {#each features as f (f.value)}
      <ChoiceItem
        value={f.value}
        header={{ heading: f.heading, subheading: f.subheading }}
      ></ChoiceItem>
    {/each}
  </Choice>
</div>

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

const plans = [
  { value: "basic", heading: "Basic", subheading: "$0/mo" },
  { value: "pro", heading: "Pro", subheading: "$12/mo" },
  { value: "team", heading: "Team", subheading: "$29/mo" },
];
const features = [
  { value: "ssl", heading: "SSL", subheading: "Encrypted traffic" },
  { value: "cdn", heading: "CDN", subheading: "Global edge cache" },
  { value: "backups", heading: "Backups", subheading: "Daily snapshots" },
  { value: "analytics", heading: "Analytics", subheading: "Usage insights" },
];

const plan = ref(["pro"] as string[]);
const addons = ref(["ssl"] as string[]);
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <Choice
      type="radio"
      appearance="card"
      size="sm"
      :columns="3"
      tone="primary"
      :value="plan"
      :onValueChange="(next: string[]) => (plan = next)"
    >
      <ChoiceItem
        v-for="p in plans"
        :key="p.value"
        :value="p.value"
        :header="{ heading: p.heading, subheading: p.subheading }"
      ></ChoiceItem>
    </Choice>

    <Choice
      type="checkbox"
      appearance="card"
      size="sm"
      columns="auto"
      tone="success"
      :value="addons"
      :onValueChange="(next: string[]) => (addons = next)"
    >
      <ChoiceItem
        v-for="f in features"
        :key="f.value"
        :value="f.value"
        :header="{ heading: f.heading, subheading: f.subheading }"
      ></ChoiceItem>
    </Choice>
  </div>
</template>

// GENERATED from packages/demos/choice/columns.demo.tsx — edit the source, not this file.
import { createSignal, For } from "solid-js";
import { Choice, ChoiceItem } from "@pindoba/solid-choice";
import { stack } from "@pindoba/styled-system/patterns";

const plans = [
  { value: "basic", heading: "Basic", subheading: "$0/mo" },
  { value: "pro", heading: "Pro", subheading: "$12/mo" },
  { value: "team", heading: "Team", subheading: "$29/mo" },
];
const features = [
  { value: "ssl", heading: "SSL", subheading: "Encrypted traffic" },
  { value: "cdn", heading: "CDN", subheading: "Global edge cache" },
  { value: "backups", heading: "Backups", subheading: "Daily snapshots" },
  { value: "analytics", heading: "Analytics", subheading: "Usage insights" },
];
export default function ColumnsDemo() {
  const [plan, setPlan] = createSignal(["pro"] as string[]);
  const [addons, setAddons] = createSignal(["ssl"] as string[]);
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <Choice
        type="radio"
        appearance="card"
        size="sm"
        columns={3}
        tone="primary"
        value={plan()}
        onValueChange={setPlan}
      >
        <For each={plans}>
          {(p) => (
            <ChoiceItem
              value={p.value}
              header={{ heading: p.heading, subheading: p.subheading }}
            />
          )}
        </For>
      </Choice>

      <Choice
        type="checkbox"
        appearance="card"
        size="sm"
        columns="auto"
        tone="success"
        value={addons()}
        onValueChange={setAddons}
      >
        <For each={features}>
          {(f) => (
            <ChoiceItem
              value={f.value}
              header={{ heading: f.heading, subheading: f.subheading }}
            />
          )}
        </For>
      </Choice>
    </div>
  );
}

Grouping & background

The group container is a Panel. By default it paints a grouped surface — a deep background with a muted outline — so the options read as one group out of the box. Tune it with background, border, radius, padding, shadow, plus the tone/emphasis colorway (set background="transparent" / border="none" to drop the framing entirely). Set group to merge the items into a single segmented control (shared dividers and a flush outline) via the Group component.

PreviewCode

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

<div class={stack({ gap: "xl", direction: "column", align: "start" })}>
  <Choice type="radio" appearance="button" tone="primary" group>
    <ChoiceItem
      value="list"
      label="List"
      type="radio"
      appearance="button"
      tone="primary"
      group
      checked
    />
    <ChoiceItem
      value="board"
      label="Board"
      type="radio"
      appearance="button"
      tone="primary"
      group
    />
    <ChoiceItem
      value="calendar"
      label="Calendar"
      type="radio"
      appearance="button"
      tone="primary"
      group
    />
  </Choice>

  <Choice
    type="radio"
    appearance="card"
    size="sm"
    orientation="vertical"
    background="surface.base"
  >
    <ChoiceItem
      value="basic"
      header={{ heading: "Basic", subheading: "$0/mo" }}
      type="radio"
      appearance="card"
      size="sm"
    />
    <ChoiceItem
      value="pro"
      header={{ heading: "Pro", subheading: "$12/mo" }}
      type="radio"
      appearance="card"
      size="sm"
      checked
    />
    <ChoiceItem
      value="team"
      header={{ heading: "Team", subheading: "$29/mo" }}
      type="radio"
      appearance="card"
      size="sm"
    />
  </Choice>
</div>

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

export default function GroupedDemo() {
  const [view, setView] = useState(["list"] as string[]);
  const [plan, setPlan] = useState(["pro"] as string[]);
  return (
    <div className={stack({ gap: "xl", direction: "column", align: "start" })}>
      <Choice
        type="radio"
        appearance="button"
        tone="primary"
        group
        value={view}
        onValueChange={setView}
      >
        <ChoiceItem value="list" label="List" />
        <ChoiceItem value="board" label="Board" />
        <ChoiceItem value="calendar" label="Calendar" />
      </Choice>

      <Choice
        type="radio"
        appearance="card"
        size="sm"
        orientation="vertical"
        background="surface.base"
        value={plan}
        onValueChange={setPlan}
      >
        <ChoiceItem
          value="basic"
          header={{ heading: "Basic", subheading: "$0/mo" }}
        />
        <ChoiceItem
          value="pro"
          header={{ heading: "Pro", subheading: "$12/mo" }}
        />
        <ChoiceItem
          value="team"
          header={{ heading: "Team", subheading: "$29/mo" }}
        />
      </Choice>
    </div>
  );
}

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

  let view = $state(["list"] as string[]);
  let plan = $state(["pro"] as string[]);
</script>

<div class={stack({ gap: "xl", direction: "column", align: "start" })}>
  <Choice
    type="radio"
    appearance="button"
    tone="primary"
    group
    bind:value={view}
  >
    <ChoiceItem value="list" label="List"></ChoiceItem>
    <ChoiceItem value="board" label="Board"></ChoiceItem>
    <ChoiceItem value="calendar" label="Calendar"></ChoiceItem>
  </Choice>

  <Choice
    type="radio"
    appearance="card"
    size="sm"
    orientation="vertical"
    background="surface.base"
    bind:value={plan}
  >
    <ChoiceItem value="basic" header={{ heading: "Basic", subheading: "$0/mo" }}
    ></ChoiceItem>
    <ChoiceItem value="pro" header={{ heading: "Pro", subheading: "$12/mo" }}
    ></ChoiceItem>
    <ChoiceItem value="team" header={{ heading: "Team", subheading: "$29/mo" }}
    ></ChoiceItem>
  </Choice>
</div>

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

const view = ref(["list"] as string[]);
const plan = ref(["pro"] as string[]);
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column', align: 'start' })">
    <Choice
      type="radio"
      appearance="button"
      tone="primary"
      :group="true"
      :value="view"
      :onValueChange="(next: string[]) => (view = next)"
    >
      <ChoiceItem value="list" label="List"></ChoiceItem>
      <ChoiceItem value="board" label="Board"></ChoiceItem>
      <ChoiceItem value="calendar" label="Calendar"></ChoiceItem>
    </Choice>

    <Choice
      type="radio"
      appearance="card"
      size="sm"
      orientation="vertical"
      background="surface.base"
      :value="plan"
      :onValueChange="(next: string[]) => (plan = next)"
    >
      <ChoiceItem
        value="basic"
        :header="{ heading: 'Basic', subheading: '$0/mo' }"
      ></ChoiceItem>
      <ChoiceItem
        value="pro"
        :header="{ heading: 'Pro', subheading: '$12/mo' }"
      ></ChoiceItem>
      <ChoiceItem
        value="team"
        :header="{ heading: 'Team', subheading: '$29/mo' }"
      ></ChoiceItem>
    </Choice>
  </div>
</template>

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

export default function GroupedDemo() {
  const [view, setView] = createSignal(["list"] as string[]);
  const [plan, setPlan] = createSignal(["pro"] as string[]);
  return (
    <div class={stack({ gap: "xl", direction: "column", align: "start" })}>
      <Choice
        type="radio"
        appearance="button"
        tone="primary"
        group
        value={view()}
        onValueChange={setView}
      >
        <ChoiceItem value="list" label="List" />
        <ChoiceItem value="board" label="Board" />
        <ChoiceItem value="calendar" label="Calendar" />
      </Choice>

      <Choice
        type="radio"
        appearance="card"
        size="sm"
        orientation="vertical"
        background="surface.base"
        value={plan()}
        onValueChange={setPlan}
      >
        <ChoiceItem
          value="basic"
          header={{ heading: "Basic", subheading: "$0/mo" }}
        />
        <ChoiceItem
          value="pro"
          header={{ heading: "Pro", subheading: "$12/mo" }}
        />
        <ChoiceItem
          value="team"
          header={{ heading: "Team", subheading: "$29/mo" }}
        />
      </Choice>
    </div>
  );
}

Selectable cards

appearance="card" renders each option as a real Card (rendered as="label", so the whole card is the control), with the indicator in the card’s Banner leading slot. Pass header (and optionally footer/children) to lay out structured content. Cards are interactive (hover/active surface) and their corners nest concentrically inside the group container’s radius. The indicator sits centered on the heading’s first line. The selected card’s border takes the accent color, with a faint tint. Both are driven purely by CSS, follow the tone colorway (tone="success" reads green, etc.), and update at runtime in every framework, Astro included. Keyboard focus rings the whole card.

PreviewCode

Basic Plan

$10/month

Pro Plan

$20/month

Team Plan

$40/month

Selected plan: pro

---
// GENERATED from packages/demos/choice/cards.demo.tsx — edit the source, not this file.
import Choice from "@pindoba/astro-choice";
import { ChoiceItem } from "@pindoba/astro-choice";

const plan = ["pro"] as string[];
---

<Choice
  type="radio"
  appearance="card"
  size="sm"
  orientation="vertical"
  data-ir-root="choice/cards"
  data-ir="1"
>
  <ChoiceItem
    value="basic"
    header={{ heading: "Basic Plan", subheading: "$10/month" }}
    type="radio"
    appearance="card"
    size="sm"
  />
  <ChoiceItem
    value="pro"
    header={{ heading: "Pro Plan", subheading: "$20/month" }}
    type="radio"
    appearance="card"
    size="sm"
    checked
  />
  <ChoiceItem
    value="team"
    header={{ heading: "Team Plan", subheading: "$40/month" }}
    type="radio"
    appearance="card"
    size="sm"
  />
</Choice>

<p data-ir-root="choice/cards">
  Selected plan: <!--ir:2-->
  {plan.join(", ")}
  <!--/ir-->
</p>

<script>
  import { hydrate } from "./_client/cards.ts";

  const roots = [...document.querySelectorAll('[data-ir-root="choice/cards"]')];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

Basic Plan

$10/month

Pro Plan

$20/month

Team Plan

$40/month

Selected plan: pro

// GENERATED from packages/demos/choice/cards.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Choice, ChoiceItem } from "@pindoba/react-choice";

export default function CardsDemo() {
  const [plan, setPlan] = useState(["pro"] as string[]);
  return (
    <>
      <Choice
        type="radio"
        appearance="card"
        size="sm"
        orientation="vertical"
        value={plan}
        onValueChange={setPlan}
      >
        <ChoiceItem
          value="basic"
          header={{ heading: "Basic Plan", subheading: "$10/month" }}
        />
        <ChoiceItem
          value="pro"
          header={{ heading: "Pro Plan", subheading: "$20/month" }}
        />
        <ChoiceItem
          value="team"
          header={{ heading: "Team Plan", subheading: "$40/month" }}
        />
      </Choice>

      <p>Selected plan: {plan.join(", ")}</p>
    </>
  );
}

Basic Plan

$10/month

Pro Plan

$20/month

Team Plan

$40/month

Selected plan: pro

<script lang="ts">
  // GENERATED from packages/demos/choice/cards.demo.tsx — edit the source, not this file.
  import Choice from "@pindoba/svelte-choice";
  import { ChoiceItem } from "@pindoba/svelte-choice";

  let plan = $state(["pro"] as string[]);
</script>

<Choice
  type="radio"
  appearance="card"
  size="sm"
  orientation="vertical"
  bind:value={plan}
>
  <ChoiceItem
    value="basic"
    header={{ heading: "Basic Plan", subheading: "$10/month" }}
  ></ChoiceItem>
  <ChoiceItem
    value="pro"
    header={{ heading: "Pro Plan", subheading: "$20/month" }}
  ></ChoiceItem>
  <ChoiceItem
    value="team"
    header={{ heading: "Team Plan", subheading: "$40/month" }}
  ></ChoiceItem>
</Choice>

<p>
  Selected plan: {plan.join(", ")}
</p>

Basic Plan

$10/month

Pro Plan

$20/month

Team Plan

$40/month

Selected plan: pro

<script setup lang="ts">
// GENERATED from packages/demos/choice/cards.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Choice, ChoiceItem } from "@pindoba/vue-choice";

const plan = ref(["pro"] as string[]);
</script>

<template>
  <Choice
    type="radio"
    appearance="card"
    size="sm"
    orientation="vertical"
    :value="plan"
    :onValueChange="(next: string[]) => (plan = next)"
  >
    <ChoiceItem
      value="basic"
      :header="{ heading: 'Basic Plan', subheading: '$10/month' }"
    ></ChoiceItem>
    <ChoiceItem
      value="pro"
      :header="{ heading: 'Pro Plan', subheading: '$20/month' }"
    ></ChoiceItem>
    <ChoiceItem
      value="team"
      :header="{ heading: 'Team Plan', subheading: '$40/month' }"
    ></ChoiceItem>
  </Choice>

  <p>Selected plan: {{ plan.join(", ") }}</p>
</template>

Basic Plan

$10/month

Pro Plan

$20/month

Team Plan

$40/month

Selected plan: pro

// GENERATED from packages/demos/choice/cards.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Choice, ChoiceItem } from "@pindoba/solid-choice";

export default function CardsDemo() {
  const [plan, setPlan] = createSignal(["pro"] as string[]);
  return (
    <>
      <Choice
        type="radio"
        appearance="card"
        size="sm"
        orientation="vertical"
        value={plan()}
        onValueChange={setPlan}
      >
        <ChoiceItem
          value="basic"
          header={{ heading: "Basic Plan", subheading: "$10/month" }}
        />
        <ChoiceItem
          value="pro"
          header={{ heading: "Pro Plan", subheading: "$20/month" }}
        />
        <ChoiceItem
          value="team"
          header={{ heading: "Team Plan", subheading: "$40/month" }}
        />
      </Choice>

      <p>Selected plan: {plan().join(", ")}</p>
    </>
  );
}

Multi-select cards

type="checkbox" turns the cards into independent toggles — the indicator becomes a checkbox and value is an array.

PreviewCode

Analytics

Usage dashboards & reports

Alerts

Email & Slack notifications

Audit log

Track every change

Enabled: analytics

---
// GENERATED from packages/demos/choice/cards-checkbox.demo.tsx — edit the source, not this file.
import Choice from "@pindoba/astro-choice";
import { ChoiceItem } from "@pindoba/astro-choice";

const features = ["analytics"] as string[];
---

<Choice
  type="checkbox"
  appearance="card"
  size="sm"
  orientation="vertical"
  data-ir-root="choice/cards-checkbox"
  data-ir="1"
>
  <ChoiceItem
    value="analytics"
    header={{
      heading: "Analytics",
      subheading: "Usage dashboards & reports",
    }}
    type="checkbox"
    appearance="card"
    size="sm"
    checked
  />
  <ChoiceItem
    value="alerts"
    header={{
      heading: "Alerts",
      subheading: "Email & Slack notifications",
    }}
    type="checkbox"
    appearance="card"
    size="sm"
  />
  <ChoiceItem
    value="audit"
    header={{ heading: "Audit log", subheading: "Track every change" }}
    type="checkbox"
    appearance="card"
    size="sm"
  />
</Choice>

<p data-ir-root="choice/cards-checkbox">
  Enabled: <!--ir:2-->
  {features.join(", ") || "none"}
  <!--/ir-->
</p>

<script>
  import { hydrate } from "./_client/cards-checkbox.ts";

  const roots = [
    ...document.querySelectorAll('[data-ir-root="choice/cards-checkbox"]'),
  ];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

Analytics

Usage dashboards & reports

Alerts

Email & Slack notifications

Audit log

Track every change

Enabled: analytics

// GENERATED from packages/demos/choice/cards-checkbox.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Choice, ChoiceItem } from "@pindoba/react-choice";

export default function CardsCheckboxDemo() {
  const [features, setFeatures] = useState(["analytics"] as string[]);
  return (
    <>
      <Choice
        type="checkbox"
        appearance="card"
        size="sm"
        orientation="vertical"
        value={features}
        onValueChange={setFeatures}
      >
        <ChoiceItem
          value="analytics"
          header={{
            heading: "Analytics",
            subheading: "Usage dashboards & reports",
          }}
        />
        <ChoiceItem
          value="alerts"
          header={{
            heading: "Alerts",
            subheading: "Email & Slack notifications",
          }}
        />
        <ChoiceItem
          value="audit"
          header={{ heading: "Audit log", subheading: "Track every change" }}
        />
      </Choice>

      <p>Enabled: {features.join(", ") || "none"}</p>
    </>
  );
}

Analytics

Usage dashboards & reports

Alerts

Email & Slack notifications

Audit log

Track every change

Enabled: analytics

<script lang="ts">
  // GENERATED from packages/demos/choice/cards-checkbox.demo.tsx — edit the source, not this file.
  import Choice from "@pindoba/svelte-choice";
  import { ChoiceItem } from "@pindoba/svelte-choice";

  let features = $state(["analytics"] as string[]);
</script>

<Choice
  type="checkbox"
  appearance="card"
  size="sm"
  orientation="vertical"
  bind:value={features}
>
  <ChoiceItem
    value="analytics"
    header={{
      heading: "Analytics",
      subheading: "Usage dashboards & reports",
    }}
  ></ChoiceItem>
  <ChoiceItem
    value="alerts"
    header={{
      heading: "Alerts",
      subheading: "Email & Slack notifications",
    }}
  ></ChoiceItem>
  <ChoiceItem
    value="audit"
    header={{ heading: "Audit log", subheading: "Track every change" }}
  ></ChoiceItem>
</Choice>

<p>
  Enabled: {features.join(", ") || "none"}
</p>

Analytics

Usage dashboards & reports

Alerts

Email & Slack notifications

Audit log

Track every change

Enabled: analytics

<script setup lang="ts">
// GENERATED from packages/demos/choice/cards-checkbox.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Choice, ChoiceItem } from "@pindoba/vue-choice";

const features = ref(["analytics"] as string[]);
</script>

<template>
  <Choice
    type="checkbox"
    appearance="card"
    size="sm"
    orientation="vertical"
    :value="features"
    :onValueChange="(next: string[]) => (features = next)"
  >
    <ChoiceItem
      value="analytics"
      :header="{
        heading: 'Analytics',
        subheading: 'Usage dashboards & reports',
      }"
    ></ChoiceItem>
    <ChoiceItem
      value="alerts"
      :header="{
        heading: 'Alerts',
        subheading: 'Email & Slack notifications',
      }"
    ></ChoiceItem>
    <ChoiceItem
      value="audit"
      :header="{ heading: 'Audit log', subheading: 'Track every change' }"
    ></ChoiceItem>
  </Choice>

  <p>Enabled: {{ features.join(", ") || "none" }}</p>
</template>

Analytics

Usage dashboards & reports

Alerts

Email & Slack notifications

Audit log

Track every change

Enabled: analytics

// GENERATED from packages/demos/choice/cards-checkbox.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Choice, ChoiceItem } from "@pindoba/solid-choice";

export default function CardsCheckboxDemo() {
  const [features, setFeatures] = createSignal(["analytics"] as string[]);
  return (
    <>
      <Choice
        type="checkbox"
        appearance="card"
        size="sm"
        orientation="vertical"
        value={features()}
        onValueChange={setFeatures}
      >
        <ChoiceItem
          value="analytics"
          header={{
            heading: "Analytics",
            subheading: "Usage dashboards & reports",
          }}
        />
        <ChoiceItem
          value="alerts"
          header={{
            heading: "Alerts",
            subheading: "Email & Slack notifications",
          }}
        />
        <ChoiceItem
          value="audit"
          header={{ heading: "Audit log", subheading: "Track every change" }}
        />
      </Choice>

      <p>Enabled: {features().join(", ") || "none"}</p>
    </>
  );
}

Stat cards

Selectable cards aren’t limited to plain text — compose Stamp, Badge, and any layout inside. indicator picks how a card shows its selection:

inline (default): the radio/checkbox in the card header.
float: a check badge pinned on the card’s top-end corner, straddling the border so it never sits on the card’s content. It’s an empty ring at rest and fills with a check when selected, so selection doesn’t rely on color alone. Handy for metric tiles like these.
none: no indicator; the accent border alone shows selection.

The real input is kept for keyboard and a11y in every mode. (hideIndicator is deprecated; it maps to indicator="none".)

PreviewCode

Errors

Warnings

---
// GENERATED from packages/demos/choice/stat.demo.tsx — edit the source, not this file.
import Choice from "@pindoba/astro-choice";
import { ChoiceItem } from "@pindoba/astro-choice";
import Stamp from "@pindoba/astro-stamp";
import Badge from "@pindoba/astro-badge";
import { Zap, TriangleAlert, TrendingUp, TrendingDown } from "@lucide/astro";
import { css } from "@pindoba/styled-system/css";
import { flex, grid } from "@pindoba/styled-system/patterns";

const metrics = [
  {
    value: "errors",
    n: "7",
    label: "Errors",
    delta: "-2",
    tone: "danger" as const,
  },
  {
    value: "warnings",
    n: "12",
    label: "Warnings",
    delta: "+3",
    tone: "warning" as const,
  },
];
---

<Choice
  type="radio"
  appearance="card"
  size="sm"
  indicator="float"
  passThrough={{ root: { style: grid.raw({ columns: 2, gap: "md" }) } }}
>
  {metrics.map((m) => {
    const rising = m.delta.startsWith("+");
    return (
      <ChoiceItem
        value={m.value}
        header={{}}
        type="radio"
        appearance="card"
        size="sm"
        indicator="float"
        checked={(["errors"] as string[]).includes(m.value)}
      >
        <Stamp
          slot="header-leading"
          shape="square"
          emphasis="muted"
          tone={m.tone}
        >
          {m.value === "errors" ? (
            <>
              <Zap size={18} />
            </>
          ) : (
            <>
              <TriangleAlert size={18} />
            </>
          )}
        </Stamp>
        <Badge slot="header-trailing" tone={m.tone} emphasis="secondary">
          <span class={flex({ gap: "3xs", align: "center" })}>
            {rising ? (
              <>
                <TrendingUp size={12} />
              </>
            ) : (
              <>
                <TrendingDown size={12} />
              </>
            )}
            {m.delta}
          </span>
        </Badge>
        <div
          class={css({
            fontSize: "5xl",
            fontWeight: "bold",
            lineHeight: "1",
            color: "neutral.text.bold",
          })}
        >
          {m.n}
        </div>
        <div class={css({ color: "neutral.text", fontSize: "sm" })}>
          {m.label}
        </div>
      </ChoiceItem>
    );
  })}
</Choice>

Errors

Warnings

// GENERATED from packages/demos/choice/stat.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Choice, ChoiceItem } from "@pindoba/react-choice";
import { Stamp } from "@pindoba/react-stamp";
import { Badge } from "@pindoba/react-badge";
import { Zap } from "lucide-react";
import { TriangleAlert } from "lucide-react";
import { TrendingUp } from "lucide-react";
import { TrendingDown } from "lucide-react";
import { css } from "@pindoba/styled-system/css";
import { flex, grid } from "@pindoba/styled-system/patterns";

const metrics = [
  {
    value: "errors",
    n: "7",
    label: "Errors",
    delta: "-2",
    tone: "danger" as const,
  },
  {
    value: "warnings",
    n: "12",
    label: "Warnings",
    delta: "+3",
    tone: "warning" as const,
  },
];
export default function StatDemo() {
  const [selected, setSelected] = useState(["errors"] as string[]);
  const stamp = (tone: "danger" | "warning", errors: boolean) => (
    <Stamp shape="square" emphasis="muted" tone={tone}>
      {errors ? <Zap size={18} /> : <TriangleAlert size={18} />}
    </Stamp>
  );
  const trend = (
    tone: "danger" | "warning",
    delta: string,
    rising: boolean,
  ) => (
    <Badge tone={tone} emphasis="secondary">
      <span className={flex({ gap: "3xs", align: "center" })}>
        {rising ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
        {delta}
      </span>
    </Badge>
  );

  return (
    <Choice
      type="radio"
      appearance="card"
      size="sm"
      indicator="float"
      value={selected}
      onValueChange={setSelected}
      passThrough={{ root: { style: grid.raw({ columns: 2, gap: "md" }) } }}
    >
      {metrics.map((m) => {
        const rising = m.delta.startsWith("+");
        return (
          <ChoiceItem
            key={m.value}
            value={m.value}
            header={{
              leading: stamp(m.tone, m.value === "errors"),
              trailing: trend(m.tone, m.delta, rising),
            }}
          >
            <div
              className={css({
                fontSize: "5xl",
                fontWeight: "bold",
                lineHeight: "1",
                color: "neutral.text.bold",
              })}
            >
              {m.n}
            </div>
            <div className={css({ color: "neutral.text", fontSize: "sm" })}>
              {m.label}
            </div>
          </ChoiceItem>
        );
      })}
    </Choice>
  );
}

Errors

Warnings

<script lang="ts">
  // GENERATED from packages/demos/choice/stat.demo.tsx — edit the source, not this file.
  import Choice from "@pindoba/svelte-choice";
  import { ChoiceItem } from "@pindoba/svelte-choice";
  import Stamp from "@pindoba/svelte-stamp";
  import Badge from "@pindoba/svelte-badge";
  import LucideZap from "@lucide/svelte/icons/zap";
  import LucideTriangleAlert from "@lucide/svelte/icons/triangle-alert";
  import LucideTrendingUp from "@lucide/svelte/icons/trending-up";
  import LucideTrendingDown from "@lucide/svelte/icons/trending-down";
  import { css } from "@pindoba/styled-system/css";
  import { flex, grid } from "@pindoba/styled-system/patterns";

  const metrics = [
    {
      value: "errors",
      n: "7",
      label: "Errors",
      delta: "-2",
      tone: "danger" as const,
    },
    {
      value: "warnings",
      n: "12",
      label: "Warnings",
      delta: "+3",
      tone: "warning" as const,
    },
  ];

  let selected = $state(["errors"] as string[]);
</script>

{#snippet stamp(tone: "danger" | "warning", errors: boolean)}
  <Stamp shape="square" emphasis="muted" {tone}>
    {#if errors}
      <LucideZap size={18} />
    {:else}
      <LucideTriangleAlert size={18} />
    {/if}
  </Stamp>
{/snippet}
{#snippet trend(tone: "danger" | "warning", delta: string, rising: boolean)}
  <Badge {tone} emphasis="secondary">
    <span class={flex({ gap: "3xs", align: "center" })}>
      {#if rising}
        <LucideTrendingUp size={12} />
      {:else}
        <LucideTrendingDown size={12} />
      {/if}
      {delta}
    </span>
  </Badge>
{/snippet}

<Choice
  type="radio"
  appearance="card"
  size="sm"
  indicator="float"
  bind:value={selected}
  passThrough={{ root: { style: grid.raw({ columns: 2, gap: "md" }) } }}
>
  {#each metrics as m (m.value)}
    {@const rising = m.delta.startsWith("+")}
    {#snippet stamp1()}{@render stamp(m.tone, m.value === "errors")}{/snippet}
    {#snippet trend1()}{@render trend(m.tone, m.delta, rising)}{/snippet}
    <ChoiceItem
      value={m.value}
      header={{
        leading: stamp1,
        trailing: trend1,
      }}
    >
      <div
        class={css({
          fontSize: "5xl",
          fontWeight: "bold",
          lineHeight: "1",
          color: "neutral.text.bold",
        })}
      >
        {m.n}
      </div>
      <div class={css({ color: "neutral.text", fontSize: "sm" })}>
        {m.label}
      </div>
    </ChoiceItem>
  {/each}
</Choice>

Errors

Warnings

<script setup lang="ts">
// GENERATED from packages/demos/choice/stat.demo.tsx — edit the source, not this file.
import { h, ref } from "vue";
import { Choice, ChoiceItem } from "@pindoba/vue-choice";
import { Stamp } from "@pindoba/vue-stamp";
import { Badge } from "@pindoba/vue-badge";
import { css } from "@pindoba/styled-system/css";
import { flex, grid } from "@pindoba/styled-system/patterns";

const metrics = [
  {
    value: "errors",
    n: "7",
    label: "Errors",
    delta: "-2",
    tone: "danger" as const,
  },
  {
    value: "warnings",
    n: "12",
    label: "Warnings",
    delta: "+3",
    tone: "warning" as const,
  },
];

const StampFragment = ({
  tone,
  errors,
}: {
  tone: "danger" | "warning";
  errors: boolean;
}) =>
  h(Stamp, { shape: "square", emphasis: "muted", tone: tone }, () =>
    errors
      ? h(
          "svg",
          {
            xmlns: "http://www.w3.org/2000/svg",
            width: "18",
            height: "18",
            viewBox: "0 0 24 24",
            fill: "none",
            stroke: "currentColor",
            "stroke-width": "2",
            "stroke-linecap": "round",
            "stroke-linejoin": "round",
            class: "lucide lucide-zap",
            "aria-hidden": "true",
          },
          [
            h("path", {
              d: "M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z",
            }),
          ],
        )
      : h(
          "svg",
          {
            xmlns: "http://www.w3.org/2000/svg",
            width: "18",
            height: "18",
            viewBox: "0 0 24 24",
            fill: "none",
            stroke: "currentColor",
            "stroke-width": "2",
            "stroke-linecap": "round",
            "stroke-linejoin": "round",
            class: "lucide lucide-triangle-alert",
            "aria-hidden": "true",
          },
          [
            h("path", {
              d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
            }),
            h("path", { d: "M12 9v4" }),
            h("path", { d: "M12 17h.01" }),
          ],
        ),
  );
const Trend = ({
  tone,
  delta,
  rising,
}: {
  tone: "danger" | "warning";
  delta: string;
  rising: boolean;
}) =>
  h(Badge, { tone: tone, emphasis: "secondary" }, () =>
    h("span", { class: flex({ gap: "3xs", align: "center" }) }, [
      rising
        ? h(
            "svg",
            {
              xmlns: "http://www.w3.org/2000/svg",
              width: "12",
              height: "12",
              viewBox: "0 0 24 24",
              fill: "none",
              stroke: "currentColor",
              "stroke-width": "2",
              "stroke-linecap": "round",
              "stroke-linejoin": "round",
              class: "lucide lucide-trending-up",
              "aria-hidden": "true",
            },
            [
              h("path", { d: "M16 7h6v6" }),
              h("path", { d: "m22 7-8.5 8.5-5-5L2 17" }),
            ],
          )
        : h(
            "svg",
            {
              xmlns: "http://www.w3.org/2000/svg",
              width: "12",
              height: "12",
              viewBox: "0 0 24 24",
              fill: "none",
              stroke: "currentColor",
              "stroke-width": "2",
              "stroke-linecap": "round",
              "stroke-linejoin": "round",
              class: "lucide lucide-trending-down",
              "aria-hidden": "true",
            },
            [
              h("path", { d: "M16 17h6v-6" }),
              h("path", { d: "m22 17-8.5-8.5-5 5L2 7" }),
            ],
          ),
      delta,
    ]),
  );

const selected = ref(["errors"] as string[]);
</script>

<template>
  <Choice
    type="radio"
    appearance="card"
    size="sm"
    indicator="float"
    :value="selected"
    :onValueChange="(next: string[]) => (selected = next)"
    :passThrough="{ root: { style: grid.raw({ columns: 2, gap: 'md' }) } }"
  >
    <ChoiceItem
      v-for="m in metrics"
      :key="m.value"
      :value="m.value"
      :header="{
        leading: h(StampFragment, {
          tone: m.tone,
          errors: m.value === 'errors',
        }),
        trailing: h(Trend, {
          tone: m.tone,
          delta: m.delta,
          rising: m.delta.startsWith('+'),
        }),
      }"
    >
      <div
        :class="
          css({
            fontSize: '5xl',
            fontWeight: 'bold',
            lineHeight: '1',
            color: 'neutral.text.bold',
          })
        "
      >
        {{ m.n }}
      </div>
      <div :class="css({ color: 'neutral.text', fontSize: 'sm' })">
        {{ m.label }}
      </div>
    </ChoiceItem>
  </Choice>
</template>

Errors

Warnings

// GENERATED from packages/demos/choice/stat.demo.tsx — edit the source, not this file.
import { createSignal, For, Show } from "solid-js";
import { Choice, ChoiceItem } from "@pindoba/solid-choice";
import { Stamp } from "@pindoba/solid-stamp";
import { Badge } from "@pindoba/solid-badge";
import { css } from "@pindoba/styled-system/css";
import { flex, grid } from "@pindoba/styled-system/patterns";

const metrics = [
  {
    value: "errors",
    n: "7",
    label: "Errors",
    delta: "-2",
    tone: "danger" as const,
  },
  {
    value: "warnings",
    n: "12",
    label: "Warnings",
    delta: "+3",
    tone: "warning" as const,
  },
];
export default function StatDemo() {
  const [selected, setSelected] = createSignal(["errors"] as string[]);
  const stamp = (tone: "danger" | "warning", errors: boolean) => (
    <Stamp shape="square" emphasis="muted" tone={tone}>
      <Show
        when={errors}
        fallback={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-triangle-alert"
            aria-hidden="true"
          >
            <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
            <path d="M12 9v4" />
            <path d="M12 17h.01" />
          </svg>
        }
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-zap"
          aria-hidden="true"
        >
          <path d="M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z" />
        </svg>
      </Show>
    </Stamp>
  );
  const trend = (
    tone: "danger" | "warning",
    delta: string,
    rising: boolean,
  ) => (
    <Badge tone={tone} emphasis="secondary">
      <span class={flex({ gap: "3xs", align: "center" })}>
        <Show
          when={rising}
          fallback={
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-trending-down"
              aria-hidden="true"
            >
              <path d="M16 17h6v-6" />
              <path d="m22 17-8.5-8.5-5 5L2 7" />
            </svg>
          }
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="12"
            height="12"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-trending-up"
            aria-hidden="true"
          >
            <path d="M16 7h6v6" />
            <path d="m22 7-8.5 8.5-5-5L2 17" />
          </svg>
        </Show>
        {delta}
      </span>
    </Badge>
  );

  return (
    <Choice
      type="radio"
      appearance="card"
      size="sm"
      indicator="float"
      value={selected()}
      onValueChange={setSelected}
      passThrough={{ root: { style: grid.raw({ columns: 2, gap: "md" }) } }}
    >
      <For each={metrics}>
        {(m) => {
          const rising = m.delta.startsWith("+");
          return (
            <ChoiceItem
              value={m.value}
              header={{
                leading: stamp(m.tone, m.value === "errors"),
                trailing: trend(m.tone, m.delta, rising),
              }}
            >
              <div
                class={css({
                  fontSize: "5xl",
                  fontWeight: "bold",
                  lineHeight: "1",
                  color: "neutral.text.bold",
                })}
              >
                {m.n}
              </div>
              <div class={css({ color: "neutral.text", fontSize: "sm" })}>
                {m.label}
              </div>
            </ChoiceItem>
          );
        }}
      </For>
    </Choice>
  );
}

Checkboxes

type="checkbox" allows independent multi-selection. value is always an array.

PreviewCode

I accept the termsSubscribe to newsletterSend me product offers

Accepted: terms

---
// GENERATED from packages/demos/choice/checkboxes.demo.tsx — edit the source, not this file.
import Choice from "@pindoba/astro-choice";
import { ChoiceItem } from "@pindoba/astro-choice";

const agreements = ["terms"] as string[];
---

<Choice
  type="checkbox"
  appearance="checkbox"
  orientation="vertical"
  data-ir-root="choice/checkboxes"
  data-ir="1"
>
  <ChoiceItem
    value="terms"
    label="I accept the terms"
    type="checkbox"
    appearance="checkbox"
    checked
  />
  <ChoiceItem
    value="newsletter"
    label="Subscribe to newsletter"
    type="checkbox"
    appearance="checkbox"
  />
  <ChoiceItem
    value="offers"
    label="Send me product offers"
    type="checkbox"
    appearance="checkbox"
  />
</Choice>

<p data-ir-root="choice/checkboxes">
  Accepted: <!--ir:2-->
  {agreements.join(", ") || "none"}
  <!--/ir-->
</p>

<script>
  import { hydrate } from "./_client/checkboxes.ts";

  const roots = [
    ...document.querySelectorAll('[data-ir-root="choice/checkboxes"]'),
  ];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

I accept the termsSubscribe to newsletterSend me product offers

Accepted: terms

// GENERATED from packages/demos/choice/checkboxes.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Choice, ChoiceItem } from "@pindoba/react-choice";

export default function CheckboxesDemo() {
  const [agreements, setAgreements] = useState(["terms"] as string[]);
  return (
    <>
      <Choice
        type="checkbox"
        appearance="checkbox"
        orientation="vertical"
        value={agreements}
        onValueChange={setAgreements}
      >
        <ChoiceItem value="terms" label="I accept the terms" />
        <ChoiceItem value="newsletter" label="Subscribe to newsletter" />
        <ChoiceItem value="offers" label="Send me product offers" />
      </Choice>

      <p>Accepted: {agreements.join(", ") || "none"}</p>
    </>
  );
}

I accept the terms Subscribe to newsletter Send me product offers

Accepted: terms

<script lang="ts">
  // GENERATED from packages/demos/choice/checkboxes.demo.tsx — edit the source, not this file.
  import Choice from "@pindoba/svelte-choice";
  import { ChoiceItem } from "@pindoba/svelte-choice";

  let agreements = $state(["terms"] as string[]);
</script>

<Choice
  type="checkbox"
  appearance="checkbox"
  orientation="vertical"
  bind:value={agreements}
>
  <ChoiceItem value="terms" label="I accept the terms"></ChoiceItem>
  <ChoiceItem value="newsletter" label="Subscribe to newsletter"></ChoiceItem>
  <ChoiceItem value="offers" label="Send me product offers"></ChoiceItem>
</Choice>

<p>
  Accepted: {agreements.join(", ") || "none"}
</p>

I accept the termsSubscribe to newsletterSend me product offers

Accepted: terms

<script setup lang="ts">
// GENERATED from packages/demos/choice/checkboxes.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Choice, ChoiceItem } from "@pindoba/vue-choice";

const agreements = ref(["terms"] as string[]);
</script>

<template>
  <Choice
    type="checkbox"
    appearance="checkbox"
    orientation="vertical"
    :value="agreements"
    :onValueChange="(next: string[]) => (agreements = next)"
  >
    <ChoiceItem value="terms" label="I accept the terms"></ChoiceItem>
    <ChoiceItem value="newsletter" label="Subscribe to newsletter"></ChoiceItem>
    <ChoiceItem value="offers" label="Send me product offers"></ChoiceItem>
  </Choice>

  <p>Accepted: {{ agreements.join(", ") || "none" }}</p>
</template>

I accept the termsSubscribe to newsletterSend me product offers

Accepted: terms

// GENERATED from packages/demos/choice/checkboxes.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Choice, ChoiceItem } from "@pindoba/solid-choice";

export default function CheckboxesDemo() {
  const [agreements, setAgreements] = createSignal(["terms"] as string[]);
  return (
    <>
      <Choice
        type="checkbox"
        appearance="checkbox"
        orientation="vertical"
        value={agreements()}
        onValueChange={setAgreements}
      >
        <ChoiceItem value="terms" label="I accept the terms" />
        <ChoiceItem value="newsletter" label="Subscribe to newsletter" />
        <ChoiceItem value="offers" label="Send me product offers" />
      </Choice>

      <p>Accepted: {agreements().join(", ") || "none"}</p>
    </>
  );
}

Items array

Instead of slotting children, pass an items array — the data-driven mode used by TabNav/Accordion. Each entry becomes a fully-wired item.

PreviewCode

DailyWeeklyMonthly

Selected: weekly

---
// GENERATED from packages/demos/choice/items.demo.tsx — edit the source, not this file.
import Choice from "@pindoba/astro-choice";

const items = [
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
  { value: "monthly", label: "Monthly", disabled: true },
];

const value = ["weekly"] as string[];
---

<Choice
  type="radio"
  appearance="button"
  items={items}
  value={["weekly"] as string[]}
  data-ir-root="choice/items"
  data-ir="1"
/>

<p data-ir-root="choice/items">
  Selected: <!--ir:2-->
  {value.join(", ")}
  <!--/ir-->
</p>

<script>
  import { hydrate } from "./_client/items.ts";

  const roots = [...document.querySelectorAll('[data-ir-root="choice/items"]')];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

DailyWeeklyMonthly

Selected: weekly

// GENERATED from packages/demos/choice/items.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Choice } from "@pindoba/react-choice";

const items = [
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
  { value: "monthly", label: "Monthly", disabled: true },
];
export default function ItemsDemo() {
  const [value, setValue] = useState(["weekly"] as string[]);
  return (
    <>
      <Choice
        type="radio"
        appearance="button"
        items={items}
        value={value}
        onValueChange={setValue}
      />

      <p>Selected: {value.join(", ")}</p>
    </>
  );
}

Daily Weekly Monthly

Selected: weekly

<script lang="ts">
  // GENERATED from packages/demos/choice/items.demo.tsx — edit the source, not this file.
  import Choice from "@pindoba/svelte-choice";

  const items = [
    { value: "daily", label: "Daily" },
    { value: "weekly", label: "Weekly" },
    { value: "monthly", label: "Monthly", disabled: true },
  ];

  let value = $state(["weekly"] as string[]);
</script>

<Choice type="radio" appearance="button" {items} bind:value></Choice>

<p>
  Selected: {value.join(", ")}
</p>

DailyWeeklyMonthly

Selected: weekly

<script setup lang="ts">
// GENERATED from packages/demos/choice/items.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Choice } from "@pindoba/vue-choice";

const items = [
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
  { value: "monthly", label: "Monthly", disabled: true },
];

const value = ref(["weekly"] as string[]);
</script>

<template>
  <Choice
    type="radio"
    appearance="button"
    :items="items"
    :value="value"
    :onValueChange="(next: string[]) => (value = next)"
  ></Choice>

  <p>Selected: {{ value.join(", ") }}</p>
</template>

DailyWeeklyMonthly

Selected: weekly

// GENERATED from packages/demos/choice/items.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Choice } from "@pindoba/solid-choice";

const items = [
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
  { value: "monthly", label: "Monthly", disabled: true },
];
export default function ItemsDemo() {
  const [value, setValue] = createSignal(["weekly"] as string[]);
  return (
    <>
      <Choice
        type="radio"
        appearance="button"
        items={items}
        value={value()}
        onValueChange={setValue}
      />

      <p>Selected: {value().join(", ")}</p>
    </>
  );
}

#Default

#Segmented control

#A segment with its own colorway

#Sizes

#Affixes

#Emphasis

#Tone

#Orientation & columns

Basic

Pro

Team

SSL

CDN

Backups

Analytics

#Grouping & background

Basic

Pro

Team

#Selectable cards

Basic Plan

Pro Plan

Team Plan

#Multi-select cards

Analytics

Alerts

Audit log

#Stat cards

#Checkboxes

#Items array

Default

Segmented control

A segment with its own colorway

Sizes

Affixes

Emphasis

Tone

Orientation & columns

Grouping & background

Selectable cards

Multi-select cards

Stat cards

Checkboxes

Items array