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.

AstroReactSvelteVue

PreviewCode

DailyWeeklyMonthly

---
import Choice from "../Choice.astro";
import ChoiceItem from "../ChoiceItem.astro";
---

<Choice type="radio" defaultValue={["daily"]}>
  <ChoiceItem value="daily" label="Daily" checked />
  <ChoiceItem value="weekly" label="Weekly" />
  <ChoiceItem value="monthly" label="Monthly" />
</Choice>

DailyWeeklyMonthly

Selected: daily

import React from "react";
import { Choice } from "../Choice";

export default function DefaultDemo() {
  const [value, setValue] = React.useState<string[]>(["daily"]);

  return (
    <>
      <Choice
        type="radio"
        value={value}
        onValueChange={setValue}
        items={[
          { value: "daily", label: "Daily" },
          { value: "weekly", label: "Weekly" },
          { value: "monthly", label: "Monthly" },
        ]}
      />
      <p>Selected: {value.join(", ") || "none"}</p>
    </>
  );
}

Daily Weekly Monthly

Selected: daily

<script lang="ts">
  import Choice from "../choice.svelte";
  import ChoiceItem from "../choice-item.svelte";

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

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

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

DailyWeeklyMonthly

Selected: daily

<script setup lang="ts">
import { ref } from "vue";
import { Choice } from "@pindoba/vue-choice";

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

<template>
  <Choice
    type="radio"
    :value="value"
    @value-change="value = $event"
    :items="[
      { value: 'daily', label: 'Daily' },
      { value: 'weekly', label: 'Weekly' },
      { value: 'monthly', label: 'Monthly' },
    ]"
  />
  <p>Selected: {{ value.join(", ") || "none" }}</p>
</template>

Segmented control

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

AstroReactSvelteVue

PreviewCode

---
import Choice from "../Choice.astro";
import type { ChoiceItemInput } from "@pindoba/core-choice";
import { stack } from "@pindoba/styled-system/patterns";

// Items-array mode: the parent <Choice> resolves every item's props
// server-side (feedback, emphasis, selection), so the group styling cascades
// without per-item repetition — the Astro-native alternative to Svelte's
// context cascade.
const viewItems: ChoiceItemInput[] = [
  { value: "list", label: "List" },
  { value: "board", label: "Board" },
  { value: "calendar", label: "Calendar" },
];

const sizeItems: ChoiceItemInput[] = [
  { value: "s", label: "Small" },
  { value: "m", label: "Medium" },
  { value: "l", label: "Large" },
];
---

<div class={stack({ gap: "lg", direction: "column" })}>
  <Choice
    type="radio"
    appearance="button"
    feedback="primary"
    items={viewItems}
    defaultValue={["list"]}
  />

  <Choice
    type="radio"
    appearance="button"
    feedback="success"
    items={sizeItems}
    defaultValue={["m"]}
  />
</div>

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

export default function SegmentedDemo() {
  const [view, setView] = React.useState<string[]>(["list"]);

  return (
    <div className={stack({ gap: "lg", direction: "column" })}>
      <Choice
        type="radio"
        appearance="button"
        feedback="primary"
        value={view}
        onValueChange={setView}
        items={[
          { value: "list", label: "List" },
          { value: "board", label: "Board" },
          { value: "calendar", label: "Calendar" },
        ]}
      />

      <Choice
        type="radio"
        appearance="button"
        feedback="success"
        defaultValue={["m"]}
        items={[
          { value: "s", label: "Small" },
          { value: "m", label: "Medium" },
          { value: "l", label: "Large" },
        ]}
      />
    </div>
  );
}

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

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

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

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

<script setup lang="ts">
import { ref } from "vue";
import { Choice } from "@pindoba/vue-choice";
import { stack } from "@pindoba/styled-system/patterns";

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

<template>
  <div :class="stack({ gap: 'lg', direction: 'column' })">
    <Choice
      type="radio"
      appearance="button"
      feedback="primary"
      :value="view"
      @value-change="view = $event"
      :items="[
        { value: 'list', label: 'List' },
        { value: 'board', label: 'Board' },
        { value: 'calendar', label: 'Calendar' },
      ]"
    />

    <Choice
      type="radio"
      appearance="button"
      feedback="success"
      :defaultValue="['m']"
      :items="[
        { value: 's', label: 'Small' },
        { value: 'm', label: 'Medium' },
        { value: 'l', label: 'Large' },
      ]"
    />
  </div>
</template>

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.

AstroReactSvelteVue

PreviewCode

---
import Choice from "../Choice.astro";
import ChoiceItem from "../ChoiceItem.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" feedback="primary" size={size}>
        <ChoiceItem value="s" label="Small" size={size} />
        <ChoiceItem value="m" label="Medium" size={size} checked />
        <ChoiceItem value="l" label="Large" size={size} />
      </Choice>
    ))
  }
</div>

import { Choice } from "../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"
          feedback="primary"
          size={size}
          defaultValue={["m"]}
          items={[
            { value: "s", label: "Small" },
            { value: "m", label: "Medium" },
            { value: "l", label: "Large" },
          ]}
        />
      ))}
    </div>
  );
}

<script lang="ts">
  import Choice from "../choice.svelte";
  import ChoiceItem from "../choice-item.svelte";
  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"
      feedback="primary"
      {size}
      defaultValue={["m"]}
    >
      <ChoiceItem value="s" label="Small" />
      <ChoiceItem value="m" label="Medium" />
      <ChoiceItem value="l" label="Large" />
    </Choice>
  {/each}
</div>

<script setup lang="ts">
import { Choice } 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"
      feedback="primary"
      :size="size"
      :defaultValue="['m']"
      :items="[
        { value: 's', label: 'Small' },
        { value: 'm', label: 'Medium' },
        { value: 'l', label: 'Large' },
      ]"
    />
  </div>
</template>

Emphasis

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

AstroReactSvelteVue

PreviewCode

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

const emphases = ["primary", "secondary", "tertiary"] as const;
const options = ["Day", "Week", "Month"];
---

<div class={stack({ gap: "lg", direction: "column", align: "start" })}>
  {
    emphases.map((emphasis) => (
      <Choice type="radio" appearance="button" feedback="primary">
        {options.map((label, i) => (
          <ChoiceItem
            value={label.toLowerCase()}
            label={label}
            emphasis={emphasis}
            feedback="primary"
            checked={i === 1}
          />
        ))}
      </Choice>
    ))
  }
</div>

import { Choice } from "../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"
          feedback="primary"
          emphasis={emphasis}
          defaultValue={["week"]}
          items={[
            { value: "day", label: "Day" },
            { value: "week", label: "Week" },
            { value: "month", label: "Month" },
          ]}
        />
      ))}
    </div>
  );
}

<script lang="ts">
  import Choice from "../choice.svelte";
  import ChoiceItem from "../choice-item.svelte";
  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"
      feedback="primary"
      {emphasis}
      defaultValue={["week"]}
    >
      <ChoiceItem value="day" label="Day" />
      <ChoiceItem value="week" label="Week" />
      <ChoiceItem value="month" label="Month" />
    </Choice>
  {/each}
</div>

<script setup lang="ts">
import { Choice } 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"
      feedback="primary"
      :emphasis="emphasis"
      :defaultValue="['week']"
      :items="[
        { value: 'day', label: 'Day' },
        { value: 'week', label: 'Week' },
        { value: 'month', label: 'Month' },
      ]"
    />
  </div>
</template>

Feedback

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

AstroReactSvelteVue

PreviewCode

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

const feedbacks = [
  "neutral",
  "primary",
  "success",
  "warning",
  "danger",
] as const;
const options = [
  { value: "a", label: "Low" },
  { value: "b", label: "Medium" },
  { value: "c", label: "High" },
];
---

<div class={stack({ gap: "lg", direction: "column", align: "start" })}>
  {
    feedbacks.map((feedback) => (
      <Choice type="radio" appearance="button">
        {options.map((o) => (
          <ChoiceItem
            value={o.value}
            label={o.label}
            feedback={feedback}
            checked={o.value === "b"}
          />
        ))}
      </Choice>
    ))
  }
</div>

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

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

export default function FeedbackDemo() {
  return (
    <div className={stack({ gap: "lg", direction: "column", align: "start" })}>
      {feedbacks.map((feedback) => (
        <Choice
          key={feedback}
          type="radio"
          appearance="button"
          feedback={feedback}
          defaultValue={["b"]}
          items={[
            { value: "a", label: "Low" },
            { value: "b", label: "Medium" },
            { value: "c", label: "High" },
          ]}
        />
      ))}
    </div>
  );
}

<script setup lang="ts">
import { Choice } 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="feedback in feedbacks"
      :key="feedback"
      type="radio"
      appearance="button"
      :feedback="feedback"
      :defaultValue="['b']"
      :items="[
        { value: 'a', label: 'Low' },
        { value: 'b', label: 'Medium' },
        { value: 'c', label: 'High' },
      ]"
    />
  </div>
</template>

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.

AstroReactSvelteVue

PreviewCode

---
import Choice from "../Choice.astro";
import ChoiceItem from "../ChoiceItem.astro";
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" })}>
  {/* Fixed three-column grid. */}
  <Choice type="radio" appearance="card" columns={3} feedback="primary">
    {
      plans.map((p) => (
        <ChoiceItem
          value={p.value}
          appearance="card"
          size="sm"
          feedback="primary"
          checked={p.value === "pro"}
          header={{ heading: p.heading, subheading: p.subheading }}
        />
      ))
    }
  </Choice>

  {/* Responsive auto-fit grid: cards reflow to fill the available width. */}
  <Choice type="checkbox" appearance="card" columns="auto" feedback="success">
    {
      features.map((f) => (
        <ChoiceItem
          value={f.value}
          appearance="card"
          size="sm"
          feedback="success"
          checked={f.value === "ssl"}
          header={{ heading: f.heading, subheading: f.subheading }}
        />
      ))
    }
  </Choice>
</div>

import React from "react";
import { Choice } from "../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] = React.useState<string[]>(["pro"]);
  const [addons, setAddons] = React.useState<string[]>(["ssl"]);

  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      {/* Fixed three-column grid. */}
      <Choice
        type="radio"
        appearance="card"
        size="sm"
        columns={3}
        feedback="primary"
        value={plan}
        onValueChange={setPlan}
        items={plans.map((p) => ({
          value: p.value,
          header: { heading: p.heading, subheading: p.subheading },
        }))}
      />

      {/* Responsive auto-fit grid: cards reflow to fill the available width. */}
      <Choice
        type="checkbox"
        appearance="card"
        size="sm"
        columns="auto"
        feedback="success"
        value={addons}
        onValueChange={setAddons}
        items={features.map((f) => ({
          value: f.value,
          header: { heading: f.heading, subheading: f.subheading },
        }))}
      />
    </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">
  import Choice from "../choice.svelte";
  import ChoiceItem from "../choice-item.svelte";
  import { stack } from "@pindoba/styled-system/patterns";

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

  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" },
  ];
</script>

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

  <!-- Responsive auto-fit grid: cards reflow to fill the available width. -->
  <Choice
    type="checkbox"
    appearance="card"
    size="sm"
    columns="auto"
    feedback="success"
    bind:value={addons}
  >
    {#each features as f (f.value)}
      <ChoiceItem
        value={f.value}
        header={{ heading: f.heading, subheading: f.subheading }}
      />
    {/each}
  </Choice>
</div>

<script setup lang="ts">
import { ref } from "vue";
import { Choice } from "@pindoba/vue-choice";
import { stack } from "@pindoba/styled-system/patterns";

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

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 planItems = plans.map((p) => ({
  value: p.value,
  header: { heading: p.heading, subheading: p.subheading },
}));

const featureItems = features.map((f) => ({
  value: f.value,
  header: { heading: f.heading, subheading: f.subheading },
}));
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <!-- Fixed three-column grid. -->
    <Choice
      type="radio"
      appearance="card"
      size="sm"
      :columns="3"
      feedback="primary"
      :value="plan"
      @value-change="plan = $event"
      :items="planItems"
    />

    <!-- Responsive auto-fit grid: cards reflow to fill the available width. -->
    <Choice
      type="checkbox"
      appearance="card"
      size="sm"
      columns="auto"
      feedback="success"
      :value="addons"
      @value-change="addons = $event"
      :items="featureItems"
    />
  </div>
</template>

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 feedback/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.

AstroReactSvelteVue

PreviewCode

---
import Choice from "../Choice.astro";
import type { ChoiceItemInput } from "@pindoba/core-choice";
import { stack } from "@pindoba/styled-system/patterns";

// Items-array mode: the parent <Choice> resolves every item's props
// server-side. This is how group-level config (feedback, the group→secondary
// emphasis, the merged <Group> wrapper) cascades in Astro — no parent context
// exists, so slotted items would otherwise need the props repeated per item.
const viewItems: ChoiceItemInput[] = [
  { value: "list", label: "List" },
  { value: "board", label: "Board" },
  { value: "calendar", label: "Calendar" },
];

const planItems: ChoiceItemInput[] = [
  { value: "basic", header: { heading: "Basic", subheading: "$0/mo" } },
  { value: "pro", header: { heading: "Pro", subheading: "$12/mo" } },
  { value: "team", header: { heading: "Team", subheading: "$29/mo" } },
];
---

<div class={stack({ gap: "xl", direction: "column", align: "start" })}>
  {
    /* `group` merges the buttons into one segmented control (shared dividers,
       flush outline) by wrapping them in a <Group>. */
  }
  <Choice
    type="radio"
    appearance="button"
    feedback="primary"
    group
    items={viewItems}
    defaultValue={["list"]}
  />

  {
    /* A background + padding on the root turns the set of cards into a single
       perceived group. */
  }
  <Choice
    type="radio"
    appearance="card"
    size="sm"
    orientation="vertical"
    background="surface.base"
    padding="md"
    radius="xl"
    items={planItems}
    defaultValue={["pro"]}
  />
</div>

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

export default function GroupedDemo() {
  const [view, setView] = React.useState<string[]>(["list"]);
  const [plan, setPlan] = React.useState<string[]>(["pro"]);

  return (
    <div className={stack({ gap: "xl", direction: "column", align: "start" })}>
      {/* `group` merges the buttons into one segmented control (shared dividers,
          flush outline) by wrapping them in a <Group>. */}
      <Choice
        type="radio"
        appearance="button"
        feedback="primary"
        group
        value={view}
        onValueChange={setView}
        items={[
          { value: "list", label: "List" },
          { value: "board", label: "Board" },
          { value: "calendar", label: "Calendar" },
        ]}
      />

      {/* A background + padding on the root turns the set of cards into a single
          perceived group. */}
      <Choice
        type="radio"
        appearance="card"
        size="sm"
        orientation="vertical"
        background="surface.base"
        padding="md"
        radius="xl"
        value={plan}
        onValueChange={setPlan}
        items={[
          { value: "basic", header: { heading: "Basic", subheading: "$0/mo" } },
          { value: "pro", header: { heading: "Pro", subheading: "$12/mo" } },
          { value: "team", header: { heading: "Team", subheading: "$29/mo" } },
        ]}
      />
    </div>
  );
}

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

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

<div class={stack({ gap: "xl", direction: "column", align: "start" })}>
  <!-- `group` merges the buttons into one segmented control (shared dividers,
       flush outline) by wrapping them in a <Group>. -->
  <Choice
    type="radio"
    appearance="button"
    feedback="primary"
    group
    bind:value={view}
  >
    <ChoiceItem value="list" label="List" />
    <ChoiceItem value="board" label="Board" />
    <ChoiceItem value="calendar" label="Calendar" />
  </Choice>

  <!-- A background + padding on the root turns the set of cards into a single
       perceived group. -->
  <Choice
    type="radio"
    appearance="card"
    size="sm"
    orientation="vertical"
    background="surface.base"
    padding="md"
    radius="xl"
    bind:value={plan}
  >
    <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 setup lang="ts">
import { ref } from "vue";
import { Choice } from "@pindoba/vue-choice";
import { stack } from "@pindoba/styled-system/patterns";

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

<template>
  <div :class="stack({ gap: 'xl', direction: 'column', align: 'start' })">
    <!-- `group` merges the buttons into one segmented control (shared dividers,
         flush outline) by wrapping them in a <Group>. -->
    <Choice
      type="radio"
      appearance="button"
      feedback="primary"
      group
      :value="view"
      @value-change="view = $event"
      :items="[
        { value: 'list', label: 'List' },
        { value: 'board', label: 'Board' },
        { value: 'calendar', label: 'Calendar' },
      ]"
    />

    <!-- A background + padding on the root turns the set of cards into a single
         perceived group. -->
    <Choice
      type="radio"
      appearance="card"
      size="sm"
      orientation="vertical"
      background="surface.base"
      padding="md"
      radius="xl"
      :value="plan"
      @value-change="plan = $event"
      :items="[
        { value: 'basic', header: { heading: 'Basic', subheading: '$0/mo' } },
        { value: 'pro', header: { heading: 'Pro', subheading: '$12/mo' } },
        { value: 'team', header: { heading: 'Team', subheading: '$29/mo' } },
      ]"
    />
  </div>
</template>

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 selected card gets a ring driven purely by CSS — it follows the feedback colorway (feedback="success" rings green, etc.) and updates at runtime in both Svelte and Astro.

AstroReactSvelteVue

PreviewCode

Basic Plan

$10/month

Pro Plan

$20/month

Team Plan

$40/month

---
import Choice from "../Choice.astro";
import ChoiceItem from "../ChoiceItem.astro";
---

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

Basic Plan

$10/month

Pro Plan

$20/month

Team Plan

$40/month

Selected plan: pro

import React from "react";
import { Choice } from "../Choice";

export default function CardsDemo() {
  const [plan, setPlan] = React.useState<string[]>(["pro"]);

  return (
    <>
      <Choice
        type="radio"
        appearance="card"
        size="sm"
        orientation="vertical"
        value={plan}
        onValueChange={setPlan}
        items={[
          {
            value: "basic",
            header: { heading: "Basic Plan", subheading: "$10/month" },
          },
          {
            value: "pro",
            header: { heading: "Pro Plan", subheading: "$20/month" },
          },
          {
            value: "team",
            header: { heading: "Team Plan", subheading: "$40/month" },
          },
        ]}
      />
      <p>Selected plan: {plan.join(", ")}</p>
    </>
  );
}

Basic Plan

$10/month

Pro Plan

$20/month

Team Plan

$40/month

Selected plan: pro

<script lang="ts">
  import Choice from "../choice.svelte";
  import ChoiceItem from "../choice-item.svelte";

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

<Choice
  type="radio"
  appearance="card"
  size="sm"
  orientation="vertical"
  bind:value={plan}
>
  <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 setup lang="ts">
import { ref } from "vue";
import { Choice } from "@pindoba/vue-choice";

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

<template>
  <Choice
    type="radio"
    appearance="card"
    size="sm"
    orientation="vertical"
    :value="plan"
    @value-change="plan = $event"
    :items="[
      {
        value: 'basic',
        header: { heading: 'Basic Plan', subheading: '$10/month' },
      },
      {
        value: 'pro',
        header: { heading: 'Pro Plan', subheading: '$20/month' },
      },
      {
        value: 'team',
        header: { heading: 'Team Plan', subheading: '$40/month' },
      },
    ]"
  />
  <p>Selected plan: {{ plan.join(", ") }}</p>
</template>

Multi-select cards

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

AstroReactSvelteVue

PreviewCode

Analytics

Usage dashboards & reports

Alerts

Email & Slack notifications

Audit log

Track every change

---
import Choice from "../Choice.astro";
import ChoiceItem from "../ChoiceItem.astro";
---

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

Analytics

Usage dashboards & reports

Alerts

Email & Slack notifications

Audit log

Track every change

Enabled: analytics

import React from "react";
import { Choice } from "../Choice";

export default function CardsCheckboxDemo() {
  const [features, setFeatures] = React.useState<string[]>(["analytics"]);

  return (
    <>
      <Choice
        type="checkbox"
        appearance="card"
        size="sm"
        orientation="vertical"
        value={features}
        onValueChange={setFeatures}
        items={[
          {
            value: "analytics",
            header: {
              heading: "Analytics",
              subheading: "Usage dashboards & reports",
            },
          },
          {
            value: "alerts",
            header: {
              heading: "Alerts",
              subheading: "Email & Slack notifications",
            },
          },
          {
            value: "audit",
            header: { heading: "Audit log", subheading: "Track every change" },
          },
        ]}
      />
      <p>Enabled: {features.join(", ") || "none"}</p>
    </>
  );
}

Analytics

Usage dashboards & reports

Alerts

Email & Slack notifications

Audit log

Track every change

Enabled: analytics

<script lang="ts">
  import Choice from "../choice.svelte";
  import ChoiceItem from "../choice-item.svelte";

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

<Choice
  type="checkbox"
  appearance="card"
  size="sm"
  orientation="vertical"
  bind:value={features}
>
  <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 setup lang="ts">
import { ref } from "vue";
import { Choice } from "@pindoba/vue-choice";

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

<template>
  <Choice
    type="checkbox"
    appearance="card"
    size="sm"
    orientation="vertical"
    :value="features"
    @value-change="features = $event"
    :items="[
      {
        value: 'analytics',
        header: {
          heading: 'Analytics',
          subheading: 'Usage dashboards & reports',
        },
      },
      {
        value: 'alerts',
        header: {
          heading: 'Alerts',
          subheading: 'Email & Slack notifications',
        },
      },
      {
        value: 'audit',
        header: { heading: 'Audit log', subheading: 'Track every change' },
      },
    ]"
  />
  <p>Enabled: {{ features.join(", ") || "none" }}</p>
</template>

Stat cards

Selectable cards aren’t limited to plain text — compose Stamp, Badge, and any layout inside. Set hideIndicator to drop the radio/checkbox entirely and let the accent ring convey selection — handy for metric tiles. (The real input is kept for keyboard + a11y; only its visual is hidden.)

AstroReactSvelteVue

PreviewCode

-2

Errors

Warnings

---
import Choice from "../Choice.astro";
import ChoiceItem from "../ChoiceItem.astro";
import Stamp from "@pindoba/astro-stamp";
import Badge from "@pindoba/astro-badge";
import { TrendingDown, TrendingUp, TriangleAlert, Zap } from "@lucide/astro";
import { css } from "@pindoba/styled-system/css";
import { flex, grid } from "@pindoba/styled-system/patterns";

const metrics = [
  {
    value: "errors",
    icon: Zap,
    n: "7",
    label: "Errors",
    delta: "-2",
    trend: TrendingDown,
    feedback: "danger" as const,
  },
  {
    value: "warnings",
    icon: TriangleAlert,
    n: "12",
    label: "Warnings",
    delta: "+3",
    trend: TrendingUp,
    feedback: "warning" as const,
  },
];
---

<Choice
  type="radio"
  appearance="card"
  defaultValue={["errors"]}
  passThrough={{ root: { style: grid.raw({ columns: 2, gap: "md" }) } }}
>
  {
    metrics.map((m) => {
      const StatIcon = m.icon;
      const TrendIcon = m.trend;
      return (
        <ChoiceItem
          appearance="card"
          size="sm"
          hideIndicator
          value={m.value}
          checked={m.value === "errors"}
        >
          <Stamp
            slot="header-leading"
            shape="square"
            emphasis="muted"
            feedback={m.feedback}
          >
            <StatIcon />
          </Stamp>
          <Badge
            slot="header-trailing"
            feedback={m.feedback}
            emphasis="secondary"
          >
            <span class={flex({ gap: "3xs", align: "center" })}>
              <TrendIcon />
              {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>

-2

Errors

Warnings

import React from "react";
import { Choice } from "../Choice";
import { Stamp } from "@pindoba/react-stamp";
import { Badge } from "@pindoba/react-badge";
import { css } from "@pindoba/styled-system/css";
import { flex, grid } from "@pindoba/styled-system/patterns";

const ZapIcon = ({ size = 18 }: { size?: number }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />
  </svg>
);

const TriangleAlertIcon = ({ size = 18 }: { size?: number }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <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>
);

const TrendingDownIcon = ({ size = 12 }: { size?: number }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M16 17h6v-6" />
    <path d="m22 17-8.5-8.5-5 5L2 7" />
  </svg>
);

const TrendingUpIcon = ({ size = 12 }: { size?: number }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M16 7h6v6" />
    <path d="m22 7-8.5 8.5-5-5L2 17" />
  </svg>
);

const metrics = [
  {
    value: "errors",
    Icon: ZapIcon,
    n: "7",
    label: "Errors",
    delta: "-2",
    Trend: TrendingDownIcon,
    feedback: "danger" as const,
  },
  {
    value: "warnings",
    Icon: TriangleAlertIcon,
    n: "12",
    label: "Warnings",
    delta: "+3",
    Trend: TrendingUpIcon,
    feedback: "warning" as const,
  },
];

export default function StatDemo() {
  const [selected, setSelected] = React.useState<string[]>(["errors"]);

  return (
    <Choice
      type="radio"
      appearance="card"
      size="sm"
      hideIndicator
      value={selected}
      onValueChange={setSelected}
      passThrough={{ root: { style: grid.raw({ columns: 2, gap: "md" }) } }}
      items={metrics.map((m) => ({
        value: m.value,
        header: {
          leading: (
            <Stamp shape="square" emphasis="muted" feedback={m.feedback}>
              <m.Icon size={18} />
            </Stamp>
          ),
          trailing: (
            <Badge feedback={m.feedback} emphasis="secondary">
              <span className={flex({ gap: "3xs", align: "center" })}>
                <m.Trend size={12} />
                {m.delta}
              </span>
            </Badge>
          ),
        },
        label: (
          <>
            <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>
          </>
        ),
      }))}
    />
  );
}

-2

Errors

Warnings

<script lang="ts">
  import Choice from "../choice.svelte";
  import ChoiceItem from "../choice-item.svelte";
  import Stamp from "@pindoba/svelte-stamp";
  import Badge from "@pindoba/svelte-badge";
  import { css } from "@pindoba/styled-system/css";
  import { flex, grid } from "@pindoba/styled-system/patterns";
  import LucideZap from "@lucide/svelte/icons/zap";
  import LucideTriangleAlert from "@lucide/svelte/icons/triangle-alert";
  import LucideTrendingDown from "@lucide/svelte/icons/trending-down";
  import LucideTrendingUp from "@lucide/svelte/icons/trending-up";

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

  const metrics = [
    {
      value: "errors",
      icon: LucideZap,
      n: "7",
      label: "Errors",
      delta: "-2",
      trend: LucideTrendingDown,
      feedback: "danger" as const,
    },
    {
      value: "warnings",
      icon: LucideTriangleAlert,
      n: "12",
      label: "Warnings",
      delta: "+3",
      trend: LucideTrendingUp,
      feedback: "warning" as const,
    },
  ];
</script>

<Choice
  type="radio"
  appearance="card"
  size="sm"
  hideIndicator
  bind:value={selected}
  passThrough={{ root: { style: grid.raw({ columns: 2, gap: "md" }) } }}
>
  {#each metrics as m (m.value)}
    {@const Icon = m.icon}
    {@const Trend = m.trend}
    {#snippet leading()}
      <Stamp shape="square" emphasis="muted" feedback={m.feedback}>
        <Icon size={18} />
      </Stamp>
    {/snippet}
    {#snippet trailing()}
      <Badge feedback={m.feedback} emphasis="secondary">
        <span class={flex({ gap: "3xs", align: "center" })}>
          <Trend size={12} />
          {m.delta}
        </span>
      </Badge>
    {/snippet}
    <ChoiceItem value={m.value} header={{ leading, trailing }}>
      <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>

-2

Errors

Warnings

<script setup lang="ts">
import { ref, h } from "vue";
import { Choice } 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";
import { Zap, TriangleAlert, TrendingDown, TrendingUp } from "./_icons";

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

const metrics = [
  {
    value: "errors",
    icon: Zap,
    n: "7",
    label: "Errors",
    delta: "-2",
    trend: TrendingDown,
    feedback: "danger" as const,
  },
  {
    value: "warnings",
    icon: TriangleAlert,
    n: "12",
    label: "Warnings",
    delta: "+3",
    trend: TrendingUp,
    feedback: "warning" as const,
  },
];

const items = metrics.map((m) => ({
  value: m.value,
  header: {
    leading: h(
      Stamp,
      { shape: "square", emphasis: "muted", feedback: m.feedback },
      () =>
        h(
          "span",
          { class: css({ "& svg": { width: "18px", height: "18px" } }) },
          [h(m.icon)],
        ),
    ),
    trailing: h(Badge, { feedback: m.feedback, emphasis: "secondary" }, () =>
      h("span", { class: flex({ gap: "3xs", align: "center" }) }, [
        h(
          "span",
          { class: css({ "& svg": { width: "12px", height: "12px" } }) },
          [h(m.trend)],
        ),
        m.delta,
      ]),
    ),
  },
  label: h("div", {}, [
    h(
      "div",
      {
        class: css({
          fontSize: "5xl",
          fontWeight: "bold",
          lineHeight: "1",
          color: "neutral.text.bold",
        }),
      },
      m.n,
    ),
    h(
      "div",
      { class: css({ color: "neutral.text", fontSize: "sm" }) },
      m.label,
    ),
  ]),
}));

const rootStyle = grid.raw({ columns: 2, gap: "md" });
</script>

<template>
  <Choice
    type="radio"
    appearance="card"
    size="sm"
    hideIndicator
    :value="selected"
    @value-change="selected = $event"
    :passThrough="{ root: { style: rootStyle } }"
    :items="items"
  />
</template>

Checkboxes

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

AstroReactSvelteVue

PreviewCode

I accept the termsSubscribe to newsletterSend me product offers

---
import Choice from "../Choice.astro";
import ChoiceItem from "../ChoiceItem.astro";
---

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

I accept the termsSubscribe to newsletterSend me product offers

Accepted: terms

import React from "react";
import { Choice } from "../Choice";

export default function CheckboxesDemo() {
  const [agreements, setAgreements] = React.useState<string[]>(["terms"]);

  return (
    <>
      <Choice
        type="checkbox"
        appearance="checkbox"
        orientation="vertical"
        value={agreements}
        onValueChange={setAgreements}
        items={[
          { value: "terms", label: "I accept the terms" },
          { value: "newsletter", label: "Subscribe to newsletter" },
          { value: "offers", label: "Send me product offers" },
        ]}
      />
      <p>Accepted: {agreements.join(", ") || "none"}</p>
    </>
  );
}

I accept the terms Subscribe to newsletter Send me product offers

Accepted: terms

<script lang="ts">
  import Choice from "../choice.svelte";
  import ChoiceItem from "../choice-item.svelte";

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

<Choice
  type="checkbox"
  appearance="checkbox"
  orientation="vertical"
  bind:value={agreements}
>
  <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 termsSubscribe to newsletterSend me product offers

Accepted: terms

<script setup lang="ts">
import { ref } from "vue";
import { Choice } from "@pindoba/vue-choice";

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

<template>
  <Choice
    type="checkbox"
    appearance="checkbox"
    orientation="vertical"
    :value="agreements"
    @value-change="agreements = $event"
    :items="[
      { value: 'terms', label: 'I accept the terms' },
      { value: 'newsletter', label: 'Subscribe to newsletter' },
      { value: 'offers', label: 'Send me product offers' },
    ]"
  />
  <p>Accepted: {{ agreements.join(", ") || "none" }}</p>
</template>

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.

AstroReactSvelteVue

PreviewCode

DailyWeeklyMonthly

---
import Choice from "../Choice.astro";
import type { ChoiceItemInput } from "@pindoba/core-choice";

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

<Choice type="radio" appearance="button" {items} defaultValue={["weekly"]} />

DailyWeeklyMonthly

Selected: weekly

import React from "react";
import { Choice, type ChoiceItem } from "../Choice";

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

export default function ItemsDemo() {
  const [value, setValue] = React.useState<string[]>(["weekly"]);

  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">
  import Choice from "../choice.svelte";
  import type { ChoiceItemInput } from "@pindoba/core-choice";

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

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

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

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

DailyWeeklyMonthly

Selected: weekly

<script setup lang="ts">
import { ref } from "vue";
import { Choice, type ChoiceItem } from "@pindoba/vue-choice";

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

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

<template>
  <Choice
    type="radio"
    appearance="button"
    :items="items"
    :value="value"
    @value-change="value = $event"
  />
  <p>Selected: {{ value.join(", ") }}</p>
</template>

#Default

#Segmented control

#Sizes

#Emphasis

#Feedback

#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

Sizes

Emphasis

Feedback

Orientation & columns

Grouping & background

Selectable cards

Multi-select cards

Stat cards

Checkboxes

Items array