Checkbox

A checkbox component for binary choices and multiple selections. Supports indeterminate state and provides proper accessibility with label association. Supports three appearances: checkbox (default square indicator), button (Panel-powered with full emphasis and feedback), and switch (horizontal toggle with sliding knob).

Default

AstroReactSvelteVue

PreviewCode

UncheckedCheckedIndeterminateDisabled

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

<div class={stack({ gap: "md", direction: "column" })}>
  <Checkbox id="checkbox-unchecked">Unchecked</Checkbox>
  <Checkbox id="checkbox-checked" checked>Checked</Checkbox>
  <Checkbox id="checkbox-indeterminate" indeterminate>Indeterminate</Checkbox>
  <Checkbox id="checkbox-disabled" disabled>Disabled</Checkbox>
</div>

UncheckedCheckedIndeterminateDisabled

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

export default function DefaultDemo() {
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(true);

  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Checkbox
        id="checkbox-unchecked"
        checked={checked1}
        onChange={(e) => setChecked1(e.currentTarget.checked)}
      >
        Unchecked
      </Checkbox>
      <Checkbox
        id="checkbox-checked"
        checked={checked2}
        onChange={(e) => setChecked2(e.currentTarget.checked)}
      >
        Checked
      </Checkbox>
      <Checkbox id="checkbox-indeterminate" indeterminate>
        Indeterminate
      </Checkbox>
      <Checkbox id="checkbox-disabled" disabled>
        Disabled
      </Checkbox>
    </div>
  );
}

Unchecked Checked Indeterminate Disabled

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

  let checked1 = $state(false);
  let checked2 = $state(true);
  let indeterminate = $state(true);
</script>

<div class={stack({ gap: "md", direction: "column" })}>
  <Checkbox id="checkbox-unchecked" bind:checked={checked1}>Unchecked</Checkbox>
  <Checkbox id="checkbox-checked" bind:checked={checked2}>Checked</Checkbox>
  <Checkbox id="checkbox-indeterminate" bind:indeterminate>
    Indeterminate
  </Checkbox>
  <Checkbox id="checkbox-disabled" disabled>Disabled</Checkbox>
</div>

UncheckedCheckedIndeterminateDisabled

<script setup lang="ts">
import { ref, type Ref } from "vue";
import { Checkbox } from "@pindoba/vue-checkbox";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column" });
const checked1 = ref(false);
const checked2 = ref(true);
// Build handlers in script scope: refs auto-unwrap in the template, so
// `onChange(checked1)` there would pass a boolean, not the ref.
const onChange = (r: Ref<boolean>) => (e: Event) =>
  (r.value = (e.target as HTMLInputElement).checked);
const onChange1 = onChange(checked1);
const onChange2 = onChange(checked2);
</script>

<template>
  <div :class="col">
    <Checkbox
      id="vue-checkbox-unchecked"
      :checked="checked1"
      @change="onChange1"
      >Unchecked</Checkbox
    >
    <Checkbox id="vue-checkbox-checked" :checked="checked2" @change="onChange2"
      >Checked</Checkbox
    >
    <Checkbox id="vue-checkbox-indeterminate" :indeterminate="true"
      >Indeterminate</Checkbox
    >
    <Checkbox id="vue-checkbox-disabled" disabled>Disabled</Checkbox>
  </div>
</template>

Size

Three sizes are available across all appearances.

AstroReactSvelteVue

PreviewCode

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

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

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

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

export default function SizeDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>checkbox appearance</h3>
        <div
          className={stack({ gap: "sm", direction: "row", align: "center" })}
        >
          <Checkbox id="react-csize-sm" size="sm">
            Small
          </Checkbox>
          <Checkbox id="react-csize-md" size="md" defaultChecked>
            Medium
          </Checkbox>
          <Checkbox id="react-csize-lg" size="lg">
            Large
          </Checkbox>
        </div>
      </div>

      <div>
        <h3>button appearance</h3>
        <div
          className={stack({ gap: "sm", direction: "row", align: "center" })}
        >
          <Checkbox id="react-csbtn-sm" appearance="button" size="sm">
            Small
          </Checkbox>
          <Checkbox
            id="react-csbtn-md"
            appearance="button"
            size="md"
            defaultChecked
          >
            Medium
          </Checkbox>
          <Checkbox id="react-csbtn-lg" appearance="button" size="lg">
            Large
          </Checkbox>
        </div>
      </div>
    </div>
  );
}

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

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>checkbox appearance</h3>
    <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
      <Checkbox id="svelte-csize-sm" size="sm">Small</Checkbox>
      <Checkbox id="svelte-csize-md" size="md" checked>Medium</Checkbox>
      <Checkbox id="svelte-csize-lg" size="lg">Large</Checkbox>
    </div>
  </div>

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

<script setup lang="ts">
import { Checkbox } from "@pindoba/vue-checkbox";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
const row = stack({ gap: "sm", direction: "row", align: "center" });
</script>

<template>
  <div :class="col">
    <div>
      <h3>checkbox appearance</h3>
      <div :class="row">
        <Checkbox id="vue-csize-sm" size="sm">Small</Checkbox>
        <Checkbox id="vue-csize-md" size="md" checked>Medium</Checkbox>
        <Checkbox id="vue-csize-lg" size="lg">Large</Checkbox>
      </div>
    </div>
    <div>
      <h3>button appearance</h3>
      <div :class="row">
        <Checkbox id="vue-csbtn-sm" appearance="button" size="sm"
          >Small</Checkbox
        >
        <Checkbox id="vue-csbtn-md" appearance="button" size="md" checked
          >Medium</Checkbox
        >
        <Checkbox id="vue-csbtn-lg" appearance="button" size="lg"
          >Large</Checkbox
        >
      </div>
    </div>
  </div>
</template>

Button

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

AstroReactSvelteVue

PreviewCode

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

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

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

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

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

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

export default function ButtonDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Primary (default)</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Checkbox id="react-cbtn-p1" appearance="button" defaultChecked>
            Option 1
          </Checkbox>
          <Checkbox id="react-cbtn-p2" appearance="button">
            Option 2
          </Checkbox>
          <Checkbox id="react-cbtn-p3" appearance="button">
            Option 3
          </Checkbox>
        </div>
      </div>

      <div>
        <h3>Danger</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Checkbox
            id="react-cbtn-d1"
            appearance="button"
            feedback="danger"
            defaultChecked
          >
            Option 1
          </Checkbox>
          <Checkbox id="react-cbtn-d2" appearance="button" feedback="danger">
            Option 2
          </Checkbox>
        </div>
      </div>

      <div>
        <h3>Warning</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Checkbox
            id="react-cbtn-w1"
            appearance="button"
            feedback="warning"
            defaultChecked
          >
            Option 1
          </Checkbox>
          <Checkbox id="react-cbtn-w2" appearance="button" feedback="warning">
            Option 2
          </Checkbox>
        </div>
      </div>

      <div>
        <h3>Success</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Checkbox
            id="react-cbtn-s1"
            appearance="button"
            feedback="success"
            defaultChecked
          >
            Option 1
          </Checkbox>
          <Checkbox id="react-cbtn-s2" appearance="button" feedback="success">
            Option 2
          </Checkbox>
        </div>
      </div>
    </div>
  );
}

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

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Primary (default)</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="svelte-cbtn-p1" appearance="button" checked
        >Option 1</Checkbox
      >
      <Checkbox id="svelte-cbtn-p2" appearance="button">Option 2</Checkbox>
      <Checkbox id="svelte-cbtn-p3" appearance="button">Option 3</Checkbox>
    </div>
  </div>

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

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

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

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

<template>
  <div :class="col">
    <div v-for="g in groups" :key="g.title">
      <h3>{{ g.title }}</h3>
      <div :class="row">
        <Checkbox
          v-for="i in g.count"
          :key="i"
          :id="`vue-cbtn-${g.title}-${i}`"
          appearance="button"
          :feedback="g.feedback"
          :checked="i === 1"
        >
          Option {{ i }}
        </Checkbox>
      </div>
    </div>
  </div>
</template>

Emphasis

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

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

AstroReactSvelteVue

PreviewCode

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

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Primary (default)</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox id="astro-cbtn-e-p1" appearance="button" checked
          >Option 1</Checkbox
        >
        <Checkbox id="astro-cbtn-e-p2" appearance="button">Option 2</Checkbox>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="astro-cbtn-e-pn1"
          appearance="button"
          feedback="neutral"
          checked>Neutral 1</Checkbox
        >
        <Checkbox id="astro-cbtn-e-pn2" appearance="button" feedback="neutral"
          >Neutral 2</Checkbox
        >
      </div>
    </div>
  </div>

  <div>
    <h3>Secondary</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="astro-cbtn-e-s1"
          appearance="button"
          emphasis="secondary"
          checked>Option 1</Checkbox
        >
        <Checkbox id="astro-cbtn-e-s2" appearance="button" emphasis="secondary"
          >Option 2</Checkbox
        >
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="astro-cbtn-e-sn1"
          appearance="button"
          emphasis="secondary"
          feedback="neutral"
          checked>Neutral 1</Checkbox
        >
        <Checkbox
          id="astro-cbtn-e-sn2"
          appearance="button"
          emphasis="secondary"
          feedback="neutral">Neutral 2</Checkbox
        >
      </div>
    </div>
  </div>

  <div>
    <h3>Tertiary</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="astro-cbtn-e-t1"
          appearance="button"
          emphasis="tertiary"
          checked>Option 1</Checkbox
        >
        <Checkbox id="astro-cbtn-e-t2" appearance="button" emphasis="tertiary"
          >Option 2</Checkbox
        >
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="astro-cbtn-e-tn1"
          appearance="button"
          emphasis="tertiary"
          feedback="neutral"
          checked>Neutral 1</Checkbox
        >
        <Checkbox
          id="astro-cbtn-e-tn2"
          appearance="button"
          emphasis="tertiary"
          feedback="neutral">Neutral 2</Checkbox
        >
      </div>
    </div>
  </div>

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

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

export default function EmphasisDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Primary (default)</h3>
        <div className={stack({ gap: "lg", direction: "row" })}>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Checkbox id="react-cbtn-e-p1" appearance="button" defaultChecked>
              Option 1
            </Checkbox>
            <Checkbox id="react-cbtn-e-p2" appearance="button">
              Option 2
            </Checkbox>
          </div>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Checkbox
              id="react-cbtn-e-pn1"
              appearance="button"
              feedback="neutral"
              defaultChecked
            >
              Neutral 1
            </Checkbox>
            <Checkbox
              id="react-cbtn-e-pn2"
              appearance="button"
              feedback="neutral"
            >
              Neutral 2
            </Checkbox>
          </div>
        </div>
      </div>

      <div>
        <h3>Secondary</h3>
        <div className={stack({ gap: "lg", direction: "row" })}>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Checkbox
              id="react-cbtn-e-s1"
              appearance="button"
              emphasis="secondary"
              defaultChecked
            >
              Option 1
            </Checkbox>
            <Checkbox
              id="react-cbtn-e-s2"
              appearance="button"
              emphasis="secondary"
            >
              Option 2
            </Checkbox>
          </div>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Checkbox
              id="react-cbtn-e-sn1"
              appearance="button"
              emphasis="secondary"
              feedback="neutral"
              defaultChecked
            >
              Neutral 1
            </Checkbox>
            <Checkbox
              id="react-cbtn-e-sn2"
              appearance="button"
              emphasis="secondary"
              feedback="neutral"
            >
              Neutral 2
            </Checkbox>
          </div>
        </div>
      </div>

      <div>
        <h3>Tertiary</h3>
        <div className={stack({ gap: "lg", direction: "row" })}>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Checkbox
              id="react-cbtn-e-t1"
              appearance="button"
              emphasis="tertiary"
              defaultChecked
            >
              Option 1
            </Checkbox>
            <Checkbox
              id="react-cbtn-e-t2"
              appearance="button"
              emphasis="tertiary"
            >
              Option 2
            </Checkbox>
          </div>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Checkbox
              id="react-cbtn-e-tn1"
              appearance="button"
              emphasis="tertiary"
              feedback="neutral"
              defaultChecked
            >
              Neutral 1
            </Checkbox>
            <Checkbox
              id="react-cbtn-e-tn2"
              appearance="button"
              emphasis="tertiary"
              feedback="neutral"
            >
              Neutral 2
            </Checkbox>
          </div>
        </div>
      </div>

      <div>
        <h3>Secondary + feedback</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Checkbox
            id="react-cbtn-e-fbn"
            appearance="button"
            emphasis="secondary"
            feedback="neutral"
            defaultChecked
          >
            Neutral
          </Checkbox>
          <Checkbox
            id="react-cbtn-e-fbd"
            appearance="button"
            emphasis="secondary"
            feedback="danger"
            defaultChecked
          >
            Danger
          </Checkbox>
          <Checkbox
            id="react-cbtn-e-fbw"
            appearance="button"
            emphasis="secondary"
            feedback="warning"
            defaultChecked
          >
            Warning
          </Checkbox>
          <Checkbox
            id="react-cbtn-e-fbs"
            appearance="button"
            emphasis="secondary"
            feedback="success"
            defaultChecked
          >
            Success
          </Checkbox>
        </div>
      </div>
    </div>
  );
}

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

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Primary (default)</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox id="svelte-cbtn-e-p1" appearance="button" checked
          >Option 1</Checkbox
        >
        <Checkbox id="svelte-cbtn-e-p2" appearance="button">Option 2</Checkbox>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="svelte-cbtn-e-pn1"
          appearance="button"
          feedback="neutral"
          checked>Neutral 1</Checkbox
        >
        <Checkbox id="svelte-cbtn-e-pn2" appearance="button" feedback="neutral"
          >Neutral 2</Checkbox
        >
      </div>
    </div>
  </div>

  <div>
    <h3>Secondary</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="svelte-cbtn-e-s1"
          appearance="button"
          emphasis="secondary"
          checked>Option 1</Checkbox
        >
        <Checkbox id="svelte-cbtn-e-s2" appearance="button" emphasis="secondary"
          >Option 2</Checkbox
        >
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="svelte-cbtn-e-sn1"
          appearance="button"
          emphasis="secondary"
          feedback="neutral"
          checked>Neutral 1</Checkbox
        >
        <Checkbox
          id="svelte-cbtn-e-sn2"
          appearance="button"
          emphasis="secondary"
          feedback="neutral">Neutral 2</Checkbox
        >
      </div>
    </div>
  </div>

  <div>
    <h3>Tertiary</h3>
    <div class={stack({ gap: "lg", direction: "row" })}>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="svelte-cbtn-e-t1"
          appearance="button"
          emphasis="tertiary"
          checked>Option 1</Checkbox
        >
        <Checkbox id="svelte-cbtn-e-t2" appearance="button" emphasis="tertiary"
          >Option 2</Checkbox
        >
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="svelte-cbtn-e-tn1"
          appearance="button"
          emphasis="tertiary"
          feedback="neutral"
          checked>Neutral 1</Checkbox
        >
        <Checkbox
          id="svelte-cbtn-e-tn2"
          appearance="button"
          emphasis="tertiary"
          feedback="neutral">Neutral 2</Checkbox
        >
      </div>
    </div>
  </div>

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

<script setup lang="ts">
import { Checkbox } from "@pindoba/vue-checkbox";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
const lg = stack({ gap: "lg", direction: "row" });
const sm = stack({ gap: "sm", direction: "row" });
const emphases = [
  { title: "Primary (default)", emphasis: undefined },
  { title: "Secondary", emphasis: "secondary" },
  { title: "Tertiary", emphasis: "tertiary" },
] as const;
const fb = ["neutral", "danger", "warning", "success"] as const;
</script>

<template>
  <div :class="col">
    <div v-for="e in emphases" :key="e.title">
      <h3>{{ e.title }}</h3>
      <div :class="lg">
        <div :class="sm">
          <Checkbox
            :id="`vue-cbe-${e.title}-1`"
            appearance="button"
            :emphasis="e.emphasis"
            checked
            >Option 1</Checkbox
          >
          <Checkbox
            :id="`vue-cbe-${e.title}-2`"
            appearance="button"
            :emphasis="e.emphasis"
            >Option 2</Checkbox
          >
        </div>
        <div :class="sm">
          <Checkbox
            :id="`vue-cbe-${e.title}-n1`"
            appearance="button"
            :emphasis="e.emphasis"
            feedback="neutral"
            checked
            >Neutral 1</Checkbox
          >
          <Checkbox
            :id="`vue-cbe-${e.title}-n2`"
            appearance="button"
            :emphasis="e.emphasis"
            feedback="neutral"
            >Neutral 2</Checkbox
          >
        </div>
      </div>
    </div>
    <div>
      <h3>Secondary + feedback</h3>
      <div :class="sm">
        <Checkbox
          v-for="f in fb"
          :key="f"
          :id="`vue-cbe-fb-${f}`"
          appearance="button"
          emphasis="secondary"
          :feedback="f"
          checked
          >{{ f }}</Checkbox
        >
      </div>
    </div>
  </div>
</template>

Switch

appearance="switch" renders a horizontal toggle with a sliding knob — ideal for instant on/off settings. It still uses <input type="checkbox"> under the hood, so standard form semantics and checked/disabled behavior are unchanged.

AstroReactSvelteVue

PreviewCode

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

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Primary (default)</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="astro-csw-p1" appearance="switch" checked>Wi-Fi</Checkbox>
      <Checkbox id="astro-csw-p2" appearance="switch">Bluetooth</Checkbox>
    </div>
  </div>

  <div>
    <h3>Success</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="astro-csw-s1" appearance="switch" feedback="success" checked
        >Notifications</Checkbox
      >
      <Checkbox id="astro-csw-s2" appearance="switch" feedback="success"
        >Sync</Checkbox
      >
    </div>
  </div>

  <div>
    <h3>Warning</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="astro-csw-w1" appearance="switch" feedback="warning" checked
        >Beta features</Checkbox
      >
      <Checkbox id="astro-csw-w2" appearance="switch" feedback="warning"
        >Experimental</Checkbox
      >
    </div>
  </div>

  <div>
    <h3>Danger</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="astro-csw-d1" appearance="switch" feedback="danger" checked
        >Delete on save</Checkbox
      >
      <Checkbox id="astro-csw-d2" appearance="switch" feedback="danger"
        >Purge cache</Checkbox
      >
    </div>
  </div>

  <div>
    <h3>Sizes</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="astro-csw-sm" appearance="switch" size="sm" checked
        >Small</Checkbox
      >
      <Checkbox id="astro-csw-md" appearance="switch" size="md" checked
        >Medium</Checkbox
      >
      <Checkbox id="astro-csw-lg" appearance="switch" size="lg" checked
        >Large</Checkbox
      >
    </div>
  </div>

  <div>
    <h3>Disabled</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="astro-csw-dis1" appearance="switch" disabled
        >Unchecked</Checkbox
      >
      <Checkbox id="astro-csw-dis2" appearance="switch" disabled checked
        >Checked</Checkbox
      >
    </div>
  </div>
</div>

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

export default function SwitchDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Primary (default)</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Checkbox id="react-csw-p1" appearance="switch" defaultChecked>
            Wi-Fi
          </Checkbox>
          <Checkbox id="react-csw-p2" appearance="switch">
            Bluetooth
          </Checkbox>
        </div>
      </div>

      <div>
        <h3>Success</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Checkbox
            id="react-csw-s1"
            appearance="switch"
            feedback="success"
            defaultChecked
          >
            Notifications
          </Checkbox>
          <Checkbox id="react-csw-s2" appearance="switch" feedback="success">
            Sync
          </Checkbox>
        </div>
      </div>

      <div>
        <h3>Warning</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Checkbox
            id="react-csw-w1"
            appearance="switch"
            feedback="warning"
            defaultChecked
          >
            Beta features
          </Checkbox>
          <Checkbox id="react-csw-w2" appearance="switch" feedback="warning">
            Experimental
          </Checkbox>
        </div>
      </div>

      <div>
        <h3>Danger</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Checkbox
            id="react-csw-d1"
            appearance="switch"
            feedback="danger"
            defaultChecked
          >
            Delete on save
          </Checkbox>
          <Checkbox id="react-csw-d2" appearance="switch" feedback="danger">
            Purge cache
          </Checkbox>
        </div>
      </div>

      <div>
        <h3>Sizes</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Checkbox
            id="react-csw-sm"
            appearance="switch"
            size="sm"
            defaultChecked
          >
            Small
          </Checkbox>
          <Checkbox
            id="react-csw-md"
            appearance="switch"
            size="md"
            defaultChecked
          >
            Medium
          </Checkbox>
          <Checkbox
            id="react-csw-lg"
            appearance="switch"
            size="lg"
            defaultChecked
          >
            Large
          </Checkbox>
        </div>
      </div>

      <div>
        <h3>Disabled</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Checkbox id="react-csw-dis1" appearance="switch" disabled>
            Unchecked
          </Checkbox>
          <Checkbox
            id="react-csw-dis2"
            appearance="switch"
            disabled
            defaultChecked
          >
            Checked
          </Checkbox>
        </div>
      </div>
    </div>
  );
}

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

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Primary (default)</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="svelte-csw-p1" appearance="switch" checked>Wi-Fi</Checkbox>
      <Checkbox id="svelte-csw-p2" appearance="switch">Bluetooth</Checkbox>
    </div>
  </div>

  <div>
    <h3>Success</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox
        id="svelte-csw-s1"
        appearance="switch"
        feedback="success"
        checked>Notifications</Checkbox
      >
      <Checkbox id="svelte-csw-s2" appearance="switch" feedback="success"
        >Sync</Checkbox
      >
    </div>
  </div>

  <div>
    <h3>Warning</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox
        id="svelte-csw-w1"
        appearance="switch"
        feedback="warning"
        checked>Beta features</Checkbox
      >
      <Checkbox id="svelte-csw-w2" appearance="switch" feedback="warning"
        >Experimental</Checkbox
      >
    </div>
  </div>

  <div>
    <h3>Danger</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="svelte-csw-d1" appearance="switch" feedback="danger" checked
        >Delete on save</Checkbox
      >
      <Checkbox id="svelte-csw-d2" appearance="switch" feedback="danger"
        >Purge cache</Checkbox
      >
    </div>
  </div>

  <div>
    <h3>Sizes</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="svelte-csw-sm" appearance="switch" size="sm" checked
        >Small</Checkbox
      >
      <Checkbox id="svelte-csw-md" appearance="switch" size="md" checked
        >Medium</Checkbox
      >
      <Checkbox id="svelte-csw-lg" appearance="switch" size="lg" checked
        >Large</Checkbox
      >
    </div>
  </div>

  <div>
    <h3>Disabled</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="svelte-csw-dis1" appearance="switch" disabled
        >Unchecked</Checkbox
      >
      <Checkbox id="svelte-csw-dis2" appearance="switch" disabled checked
        >Checked</Checkbox
      >
    </div>
  </div>
</div>

<script setup lang="ts">
import { Checkbox } from "@pindoba/vue-checkbox";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column" });
const row = stack({ gap: "sm", direction: "row" });
const groups = [
  {
    title: "Primary (default)",
    feedback: undefined,
    a: "Wi-Fi",
    b: "Bluetooth",
  },
  { title: "Success", feedback: "success", a: "Notifications", b: "Sync" },
  {
    title: "Warning",
    feedback: "warning",
    a: "Beta features",
    b: "Experimental",
  },
  {
    title: "Danger",
    feedback: "danger",
    a: "Delete on save",
    b: "Purge cache",
  },
] as const;
const sizes = ["sm", "md", "lg"] as const;
const sizeLabels = { sm: "Small", md: "Medium", lg: "Large" } as const;
</script>

<template>
  <div :class="col">
    <div v-for="g in groups" :key="g.title">
      <h3>{{ g.title }}</h3>
      <div :class="row">
        <Checkbox
          :id="`vue-csw-${g.title}-1`"
          appearance="switch"
          :feedback="g.feedback"
          checked
          >{{ g.a }}</Checkbox
        >
        <Checkbox
          :id="`vue-csw-${g.title}-2`"
          appearance="switch"
          :feedback="g.feedback"
          >{{ g.b }}</Checkbox
        >
      </div>
    </div>
    <div>
      <h3>Sizes</h3>
      <div :class="row">
        <Checkbox
          v-for="s in sizes"
          :key="s"
          :id="`vue-csw-size-${s}`"
          appearance="switch"
          :size="s"
          checked
          >{{ sizeLabels[s] }}</Checkbox
        >
      </div>
    </div>
    <div>
      <h3>Disabled</h3>
      <div :class="row">
        <Checkbox id="vue-csw-dis1" appearance="switch" disabled
          >Unchecked</Checkbox
        >
        <Checkbox id="vue-csw-dis2" appearance="switch" disabled checked
          >Checked</Checkbox
        >
      </div>
    </div>
  </div>
</template>

With Badge

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

AstroReactSvelteVue

PreviewCode

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

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

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

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

export default function BadgeDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>checkbox appearance</h3>
        <div
          className={stack({ gap: "sm", direction: "row", align: "center" })}
        >
          <Checkbox id="react-badge-cb-sm" size="sm" defaultChecked>
            Small{" "}
            <Badge feedback="primary" size="sm">
              3
            </Badge>
          </Checkbox>
          <Checkbox id="react-badge-cb-md" size="md" defaultChecked>
            Medium{" "}
            <Badge feedback="primary" size="sm">
              3
            </Badge>
          </Checkbox>
          <Checkbox id="react-badge-cb-lg" size="lg" defaultChecked>
            Large{" "}
            <Badge feedback="primary" size="sm">
              3
            </Badge>
          </Checkbox>
        </div>
      </div>

      <div>
        <h3>button appearance</h3>
        <div
          className={stack({ gap: "sm", direction: "row", align: "center" })}
        >
          <Checkbox
            id="react-badge-cbtn-sm"
            appearance="button"
            size="sm"
            defaultChecked
          >
            Small{" "}
            <Badge feedback="primary" size="sm">
              3
            </Badge>
          </Checkbox>
          <Checkbox
            id="react-badge-cbtn-md"
            appearance="button"
            size="md"
            defaultChecked
          >
            Medium{" "}
            <Badge feedback="primary" size="sm">
              3
            </Badge>
          </Checkbox>
          <Checkbox
            id="react-badge-cbtn-lg"
            appearance="button"
            size="lg"
            defaultChecked
          >
            Large{" "}
            <Badge feedback="primary" size="sm">
              3
            </Badge>
          </Checkbox>
        </div>
      </div>
    </div>
  );
}

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

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>checkbox appearance</h3>
    <div class={stack({ gap: "sm", direction: "row", align: "center" })}>
      <Checkbox id="svelte-badge-cb-sm" size="sm" checked>
        Small <Badge feedback="primary" size="sm">3</Badge>
      </Checkbox>
      <Checkbox id="svelte-badge-cb-md" size="md" checked>
        Medium <Badge feedback="primary" size="sm">3</Badge>
      </Checkbox>
      <Checkbox id="svelte-badge-cb-lg" size="lg" checked>
        Large <Badge feedback="primary" size="sm">3</Badge>
      </Checkbox>
    </div>
  </div>

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

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

<template>
  <div :class="col">
    <div>
      <h3>checkbox appearance</h3>
      <div :class="row">
        <Checkbox
          v-for="s in sizes"
          :key="s"
          :id="`vue-badge-cb-${s}`"
          :size="s"
          checked
        >
          {{ sizeLabels[s] }} <Badge feedback="primary" size="sm">3</Badge>
        </Checkbox>
      </div>
    </div>
    <div>
      <h3>button appearance</h3>
      <div :class="row">
        <Checkbox
          v-for="s in sizes"
          :key="s"
          :id="`vue-badge-cbtn-${s}`"
          appearance="button"
          :size="s"
          checked
        >
          {{ sizeLabels[s] }} <Badge feedback="primary" size="sm">3</Badge>
        </Checkbox>
      </div>
    </div>
  </div>
</template>

Leading & Trailing slots

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

AstroReactSvelteVue

PreviewCode

---
import Checkbox from "../Checkbox.astro";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { Bell } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

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

<div class={stack({ gap: "lg", direction: "column" })}>
  <div>
    <h3>button appearance — both slots</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {
        sizes.map((size) => (
          <Checkbox
            id={`astro-lt-cbtn-${size}`}
            appearance="button"
            size={size}
            fullWidth
            checked={size === "md"}
          >
            <Stamp slot="leading" emphasis="adaptive" size="xs" shape="circle">
              <Bell />
            </Stamp>
            Notifications
            <Badge slot="trailing" emphasis="adaptive" size="sm">
              12
            </Badge>
          </Checkbox>
        ))
      }
    </div>
  </div>

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

  <div>
    <h3>button appearance — trailing only</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {
        sizes.map((size) => (
          <Checkbox
            id={`astro-lt-cbtn-trailing-${size}`}
            appearance="button"
            size={size}
            fullWidth
            checked={size === "md"}
          >
            Notifications
            <Badge slot="trailing" emphasis="adaptive" size="sm">
              12
            </Badge>
          </Checkbox>
        ))
      }
    </div>
  </div>

  <div>
    <h3>checkbox appearance</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {
        sizes.map((size) => (
          <Checkbox
            id={`astro-lt-cb-${size}`}
            size={size}
            checked={size === "md"}
          >
            Tasks
            <Badge slot="trailing" emphasis="adaptive" size="sm">
              5
            </Badge>
          </Checkbox>
        ))
      }
    </div>
  </div>
</div>

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

const BellIcon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M10.268 21a2 2 0 0 0 3.464 0" />
    <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
  </svg>
);

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

export default function LeadingTrailingDemo() {
  return (
    <div className={stack({ gap: "lg", direction: "column" })}>
      <div>
        <h3>button appearance — both slots</h3>
        <div className={stack({ gap: "sm", direction: "column" })}>
          {sizes.map((size) => (
            <Checkbox
              key={`react-lt-cbtn-${size}`}
              id={`react-lt-cbtn-${size}`}
              appearance="button"
              size={size}
              fullWidth
              defaultChecked={size === "md"}
              leading={
                <Stamp emphasis="adaptive" size="xs" shape="circle">
                  <BellIcon />
                </Stamp>
              }
              trailing={
                <Badge emphasis="adaptive" size="sm">
                  12
                </Badge>
              }
            >
              Notifications
            </Checkbox>
          ))}
        </div>
      </div>

      <div>
        <h3>button appearance — leading only</h3>
        <div className={stack({ gap: "sm", direction: "column" })}>
          {sizes.map((size) => (
            <Checkbox
              key={`react-lt-cbtn-leading-${size}`}
              id={`react-lt-cbtn-leading-${size}`}
              appearance="button"
              size={size}
              fullWidth
              defaultChecked={size === "md"}
              leading={
                <Stamp emphasis="adaptive" size="xs" shape="circle">
                  <BellIcon />
                </Stamp>
              }
            >
              Notifications
            </Checkbox>
          ))}
        </div>
      </div>

      <div>
        <h3>button appearance — trailing only</h3>
        <div className={stack({ gap: "sm", direction: "column" })}>
          {sizes.map((size) => (
            <Checkbox
              key={`react-lt-cbtn-trailing-${size}`}
              id={`react-lt-cbtn-trailing-${size}`}
              appearance="button"
              size={size}
              fullWidth
              defaultChecked={size === "md"}
              trailing={
                <Badge emphasis="adaptive" size="sm">
                  12
                </Badge>
              }
            >
              Notifications
            </Checkbox>
          ))}
        </div>
      </div>

      <div>
        <h3>checkbox appearance</h3>
        <div className={stack({ gap: "sm", direction: "column" })}>
          {sizes.map((size) => (
            <Checkbox
              key={`react-lt-cb-${size}`}
              id={`react-lt-cb-${size}`}
              size={size}
              defaultChecked={size === "md"}
              trailing={
                <Badge emphasis="adaptive" size="sm">
                  5
                </Badge>
              }
            >
              Tasks
            </Checkbox>
          ))}
        </div>
      </div>
    </div>
  );
}

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

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

<div class={stack({ gap: "lg", direction: "column" })}>
  <div>
    <h3>button appearance — both slots</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {#each sizes as size (size)}
        <Checkbox
          id={`svelte-lt-cbtn-${size}`}
          appearance="button"
          {size}
          fullWidth
          checked={size === "md"}
        >
          {#snippet leading()}
            <Stamp emphasis="adaptive" size="xs" shape="circle">
              <LucideBell />
            </Stamp>
          {/snippet}
          Notifications
          {#snippet trailing()}
            <Badge emphasis="adaptive" size="sm">12</Badge>
          {/snippet}
        </Checkbox>
      {/each}
    </div>
  </div>

  <div>
    <h3>button appearance — leading only</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {#each sizes as size (size)}
        <Checkbox
          id={`svelte-lt-cbtn-leading-${size}`}
          appearance="button"
          {size}
          fullWidth
          checked={size === "md"}
        >
          {#snippet leading()}
            <Stamp emphasis="adaptive" size="xs" shape="circle">
              <LucideBell />
            </Stamp>
          {/snippet}
          Notifications
        </Checkbox>
      {/each}
    </div>
  </div>

  <div>
    <h3>button appearance — trailing only</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {#each sizes as size (size)}
        <Checkbox
          id={`svelte-lt-cbtn-trailing-${size}`}
          appearance="button"
          {size}
          fullWidth
          checked={size === "md"}
        >
          Notifications
          {#snippet trailing()}
            <Badge emphasis="adaptive" size="sm">12</Badge>
          {/snippet}
        </Checkbox>
      {/each}
    </div>
  </div>

  <div>
    <h3>checkbox appearance</h3>
    <div class={stack({ gap: "sm", direction: "column" })}>
      {#each sizes as size (size)}
        <Checkbox id={`svelte-lt-cb-${size}`} {size} checked={size === "md"}>
          Tasks
          {#snippet trailing()}
            <Badge emphasis="adaptive" size="sm">5</Badge>
          {/snippet}
        </Checkbox>
      {/each}
    </div>
  </div>
</div>

<script setup lang="ts">
import { Checkbox } from "@pindoba/vue-checkbox";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { Bell } from "./_bell";
const col = stack({ gap: "lg", direction: "column" });
const group = stack({ gap: "sm", direction: "column" });
const sizes = ["sm", "md", "lg"] as const;
</script>

<template>
  <div :class="col">
    <div>
      <h3>button appearance — both slots</h3>
      <div :class="group">
        <Checkbox
          v-for="s in sizes"
          :key="s"
          :id="`vue-lt-cbtn-${s}`"
          appearance="button"
          :size="s"
          fullWidth
          :checked="s === 'md'"
        >
          <template #leading
            ><Stamp emphasis="adaptive" size="xs" shape="circle"><Bell /></Stamp
          ></template>
          Notifications
          <template #trailing
            ><Badge emphasis="adaptive" size="sm">12</Badge></template
          >
        </Checkbox>
      </div>
    </div>
    <div>
      <h3>button appearance — leading only</h3>
      <div :class="group">
        <Checkbox
          v-for="s in sizes"
          :key="s"
          :id="`vue-lt-cbtn-l-${s}`"
          appearance="button"
          :size="s"
          fullWidth
          :checked="s === 'md'"
        >
          <template #leading
            ><Stamp emphasis="adaptive" size="xs" shape="circle"><Bell /></Stamp
          ></template>
          Notifications
        </Checkbox>
      </div>
    </div>
    <div>
      <h3>button appearance — trailing only</h3>
      <div :class="group">
        <Checkbox
          v-for="s in sizes"
          :key="s"
          :id="`vue-lt-cbtn-t-${s}`"
          appearance="button"
          :size="s"
          fullWidth
          :checked="s === 'md'"
        >
          Notifications
          <template #trailing
            ><Badge emphasis="adaptive" size="sm">12</Badge></template
          >
        </Checkbox>
      </div>
    </div>
    <div>
      <h3>checkbox appearance</h3>
      <div :class="group">
        <Checkbox
          v-for="s in sizes"
          :key="s"
          :id="`vue-lt-cb-${s}`"
          :size="s"
          :checked="s === 'md'"
        >
          Tasks
          <template #trailing
            ><Badge emphasis="adaptive" size="sm">5</Badge></template
          >
        </Checkbox>
      </div>
    </div>
  </div>
</template>

Custom Styling

The passThrough prop provides per-slot escape hatches: style accepts a Panda CSS SystemStyleObject merged with the base styles, and props forwards arbitrary HTML attributes onto the element.

AstroReactSvelteVue

PreviewCode

Custom input style via passThrough

Rounded checkbox

Custom props via passThrough

Accept terms

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

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom input style via passThrough</h3>
    <Checkbox
      id="checkbox-custom-style"
      passThrough={{
        input: {
          style: { borderRadius: "full" },
        },
      }}
    >
      Rounded checkbox
    </Checkbox>
  </div>

  <div>
    <h3>Custom props via passThrough</h3>
    <Checkbox
      id="checkbox-custom-props"
      passThrough={{
        root: {
          props: { "data-testid": "my-checkbox" },
        },
        input: {
          props: { "aria-label": "Accept terms and conditions" },
        },
      }}
    >
      Accept terms
    </Checkbox>
  </div>
</div>

Custom input style via passThrough

Rounded checkbox

Custom props via passThrough

Accept terms

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

export default function CustomDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Custom input style via passThrough</h3>
        <div className={stack({ gap: "md", direction: "column" })}>
          <Checkbox
            id="checkbox-custom-style"
            passThrough={{
              input: {
                style: { borderRadius: "full" },
              },
            }}
          >
            Rounded checkbox
          </Checkbox>
        </div>
      </div>

      <div>
        <h3>Custom props via passThrough</h3>
        <div className={stack({ gap: "md", direction: "column" })}>
          <Checkbox
            id="checkbox-custom-props"
            passThrough={{
              root: {
                props: { "data-testid": "my-checkbox" },
              },
              input: {
                props: { "aria-label": "Accept terms and conditions" },
              },
            }}
          >
            Accept terms
          </Checkbox>
        </div>
      </div>
    </div>
  );
}

Custom input style via passThrough

Rounded checkbox

Custom props via passThrough

Accept terms

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

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom input style via passThrough</h3>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Checkbox
        id="checkbox-custom-style"
        passThrough={{
          input: {
            style: { borderRadius: "full" },
          },
        }}
      >
        Rounded checkbox
      </Checkbox>
    </div>
  </div>

  <div>
    <h3>Custom props via passThrough</h3>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Checkbox
        id="checkbox-custom-props"
        passThrough={{
          root: {
            props: { "data-testid": "my-checkbox" },
          },
          input: {
            props: { "aria-label": "Accept terms and conditions" },
          },
        }}
      >
        Accept terms
      </Checkbox>
    </div>
  </div>
</div>

Custom input style via passThrough

Rounded checkbox

Custom props via passThrough

Accept terms

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

<template>
  <div :class="col">
    <div>
      <h3>Custom input style via passThrough</h3>
      <div :class="group">
        <Checkbox
          id="vue-checkbox-custom-style"
          :passThrough="{ input: { style: { borderRadius: 'full' } } }"
        >
          Rounded checkbox
        </Checkbox>
      </div>
    </div>
    <div>
      <h3>Custom props via passThrough</h3>
      <div :class="group">
        <Checkbox
          id="vue-checkbox-custom-props"
          :passThrough="{
            root: { props: { 'data-testid': 'my-checkbox' } },
            input: { props: { 'aria-label': 'Accept terms and conditions' } },
          }"
        >
          Accept terms
        </Checkbox>
      </div>
    </div>
  </div>
</template>

#Default

#Size

checkbox appearance

button appearance

#Button

Primary (default)

Danger

Warning

Success

#Emphasis

Primary (default)

Secondary

Tertiary

Secondary + feedback

#Switch

Primary (default)

Success

Warning

Danger

Sizes

Disabled

#With Badge

checkbox appearance

button appearance

#Leading & Trailing slots

button appearance — both slots

button appearance — leading only

button appearance — trailing only

checkbox appearance

#Custom Styling

Custom input style via passThrough

Custom props via passThrough

Default

Size

Button

Emphasis

Switch

With Badge

Leading & Trailing slots

Custom Styling