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 tone), and switch (horizontal toggle with sliding knob).

Default

PreviewCode

Unchecked Checked Indeterminate Disabled

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

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

UncheckedCheckedIndeterminateDisabled

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

export default function DefaultDemo() {
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(true);
  const [indeterminate, setIndeterminate] = useState(true);
  return (
    <div className={stack({ gap: "md", direction: "column" })}>
      <Checkbox
        id="react-demo-checkbox-unchecked"
        checked={checked1}
        onChange={(e) => setChecked1(e.currentTarget.checked)}
      >
        Unchecked
      </Checkbox>
      <Checkbox
        id="react-demo-checkbox-checked"
        checked={checked2}
        onChange={(e) => setChecked2(e.currentTarget.checked)}
      >
        Checked
      </Checkbox>
      <Checkbox
        id="react-demo-checkbox-indeterminate"
        indeterminate={indeterminate}
        onChange={(e) => setIndeterminate(e.currentTarget.indeterminate)}
      >
        Indeterminate
      </Checkbox>
      <Checkbox id="react-demo-checkbox-disabled" disabled>
        Disabled
      </Checkbox>
    </div>
  );
}

Unchecked Checked Indeterminate Disabled

<script lang="ts">
  // GENERATED from packages/demos/checkbox/default.demo.tsx — edit the source, not this file.
  import Checkbox from "@pindoba/svelte-checkbox";
  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="svelte-demo-checkbox-unchecked" bind:checked={checked1}>
    Unchecked
  </Checkbox>
  <Checkbox id="svelte-demo-checkbox-checked" bind:checked={checked2}>
    Checked
  </Checkbox>
  <Checkbox id="svelte-demo-checkbox-indeterminate" bind:indeterminate>
    Indeterminate
  </Checkbox>
  <Checkbox id="svelte-demo-checkbox-disabled" disabled>Disabled</Checkbox>
</div>

Unchecked Checked Indeterminate Disabled

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

const checked1 = ref(false);
const checked2 = ref(true);
const indeterminate = ref(true);
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column' })">
    <Checkbox
      id="vue-demo-checkbox-unchecked"
      :checked="checked1"
      :onChange="
        (e: Event) => (checked1 = (e.target as HTMLInputElement).checked)
      "
    >
      Unchecked
    </Checkbox>
    <Checkbox
      id="vue-demo-checkbox-checked"
      :checked="checked2"
      :onChange="
        (e: Event) => (checked2 = (e.target as HTMLInputElement).checked)
      "
    >
      Checked
    </Checkbox>
    <Checkbox
      id="vue-demo-checkbox-indeterminate"
      :indeterminate="indeterminate"
      :onChange="
        (e: Event) =>
          (indeterminate = (e.target as HTMLInputElement).indeterminate)
      "
    >
      Indeterminate
    </Checkbox>
    <Checkbox id="vue-demo-checkbox-disabled" :disabled="true"
      >Disabled</Checkbox
    >
  </div>
</template>

UncheckedCheckedIndeterminateDisabled

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

export default function DefaultDemo() {
  const [checked1, setChecked1] = createSignal(false);
  const [checked2, setChecked2] = createSignal(true);
  const [indeterminate, setIndeterminate] = createSignal(true);
  return (
    <div class={stack({ gap: "md", direction: "column" })}>
      <Checkbox
        id="solid-demo-checkbox-unchecked"
        checked={checked1()}
        onChange={(e) => setChecked1(e.currentTarget.checked)}
      >
        Unchecked
      </Checkbox>
      <Checkbox
        id="solid-demo-checkbox-checked"
        checked={checked2()}
        onChange={(e) => setChecked2(e.currentTarget.checked)}
      >
        Checked
      </Checkbox>
      <Checkbox
        id="solid-demo-checkbox-indeterminate"
        indeterminate={indeterminate()}
        onChange={(e) => setIndeterminate(e.currentTarget.indeterminate)}
      >
        Indeterminate
      </Checkbox>
      <Checkbox id="solid-demo-checkbox-disabled" disabled>
        Disabled
      </Checkbox>
    </div>
  );
}

Size

Three sizes are available across all appearances.

PreviewCode

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

// GENERATED from packages/demos/checkbox/size.demo.tsx — edit the source, not this file.
import { Checkbox } from "@pindoba/react-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-demo-csize-sm" size="sm">
            Small
          </Checkbox>
          <Checkbox id="react-demo-csize-md" size="md" defaultChecked>
            Medium
          </Checkbox>
          <Checkbox id="react-demo-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-demo-csbtn-sm" appearance="button" size="sm">
            Small
          </Checkbox>
          <Checkbox
            id="react-demo-csbtn-md"
            appearance="button"
            size="md"
            defaultChecked
          >
            Medium
          </Checkbox>
          <Checkbox id="react-demo-csbtn-lg" appearance="button" size="lg">
            Large
          </Checkbox>
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/checkbox/size.demo.tsx — edit the source, not this file.
  import Checkbox from "@pindoba/svelte-checkbox";
  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-demo-csize-sm" size="sm">Small</Checkbox>
      <Checkbox id="svelte-demo-csize-md" size="md" checked>Medium</Checkbox>
      <Checkbox id="svelte-demo-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-demo-csbtn-sm" appearance="button" size="sm">
        Small
      </Checkbox>
      <Checkbox id="svelte-demo-csbtn-md" appearance="button" size="md" checked>
        Medium
      </Checkbox>
      <Checkbox id="svelte-demo-csbtn-lg" appearance="button" size="lg">
        Large
      </Checkbox>
    </div>
  </div>
</div>

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

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

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

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

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

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

Button

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

PreviewCode

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

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

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

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

// GENERATED from packages/demos/checkbox/button.demo.tsx — edit the source, not this file.
import { Checkbox } from "@pindoba/react-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-demo-cbtn-p1" appearance="button" defaultChecked>
            Option 1
          </Checkbox>
          <Checkbox id="react-demo-cbtn-p2" appearance="button">
            Option 2
          </Checkbox>
          <Checkbox id="react-demo-cbtn-p3" appearance="button">
            Option 3
          </Checkbox>
        </div>
      </div>

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

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

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

<script lang="ts">
  // GENERATED from packages/demos/checkbox/button.demo.tsx — edit the source, not this file.
  import Checkbox from "@pindoba/svelte-checkbox";
  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-demo-cbtn-p1" appearance="button" checked>
        Option 1
      </Checkbox>
      <Checkbox id="svelte-demo-cbtn-p2" appearance="button">Option 2</Checkbox>
      <Checkbox id="svelte-demo-cbtn-p3" appearance="button">Option 3</Checkbox>
    </div>
  </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

Emphasis

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

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

PreviewCode

---
// GENERATED from packages/demos/checkbox/emphasis.demo.tsx — edit the source, not this file.
import Checkbox from "@pindoba/astro-checkbox";
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-demo-cbtn-e-p1" appearance="button" checked>
          Option 1
        </Checkbox>
        <Checkbox id="astro-demo-cbtn-e-p2" appearance="button">
          Option 2
        </Checkbox>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="astro-demo-cbtn-e-pn1"
          appearance="button"
          tone="neutral"
          checked
        >
          Neutral 1
        </Checkbox>
        <Checkbox id="astro-demo-cbtn-e-pn2" appearance="button" tone="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-demo-cbtn-e-s1"
          appearance="button"
          emphasis="secondary"
          checked
        >
          Option 1
        </Checkbox>
        <Checkbox
          id="astro-demo-cbtn-e-s2"
          appearance="button"
          emphasis="secondary"
        >
          Option 2
        </Checkbox>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="astro-demo-cbtn-e-sn1"
          appearance="button"
          emphasis="secondary"
          tone="neutral"
          checked
        >
          Neutral 1
        </Checkbox>
        <Checkbox
          id="astro-demo-cbtn-e-sn2"
          appearance="button"
          emphasis="secondary"
          tone="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-demo-cbtn-e-t1"
          appearance="button"
          emphasis="tertiary"
          checked
        >
          Option 1
        </Checkbox>
        <Checkbox
          id="astro-demo-cbtn-e-t2"
          appearance="button"
          emphasis="tertiary"
        >
          Option 2
        </Checkbox>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="astro-demo-cbtn-e-tn1"
          appearance="button"
          emphasis="tertiary"
          tone="neutral"
          checked
        >
          Neutral 1
        </Checkbox>
        <Checkbox
          id="astro-demo-cbtn-e-tn2"
          appearance="button"
          emphasis="tertiary"
          tone="neutral"
        >
          Neutral 2
        </Checkbox>
      </div>
    </div>
  </div>

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

// GENERATED from packages/demos/checkbox/emphasis.demo.tsx — edit the source, not this file.
import { Checkbox } from "@pindoba/react-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-demo-cbtn-e-p1"
              appearance="button"
              defaultChecked
            >
              Option 1
            </Checkbox>
            <Checkbox id="react-demo-cbtn-e-p2" appearance="button">
              Option 2
            </Checkbox>
          </div>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Checkbox
              id="react-demo-cbtn-e-pn1"
              appearance="button"
              tone="neutral"
              defaultChecked
            >
              Neutral 1
            </Checkbox>
            <Checkbox
              id="react-demo-cbtn-e-pn2"
              appearance="button"
              tone="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-demo-cbtn-e-s1"
              appearance="button"
              emphasis="secondary"
              defaultChecked
            >
              Option 1
            </Checkbox>
            <Checkbox
              id="react-demo-cbtn-e-s2"
              appearance="button"
              emphasis="secondary"
            >
              Option 2
            </Checkbox>
          </div>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Checkbox
              id="react-demo-cbtn-e-sn1"
              appearance="button"
              emphasis="secondary"
              tone="neutral"
              defaultChecked
            >
              Neutral 1
            </Checkbox>
            <Checkbox
              id="react-demo-cbtn-e-sn2"
              appearance="button"
              emphasis="secondary"
              tone="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-demo-cbtn-e-t1"
              appearance="button"
              emphasis="tertiary"
              defaultChecked
            >
              Option 1
            </Checkbox>
            <Checkbox
              id="react-demo-cbtn-e-t2"
              appearance="button"
              emphasis="tertiary"
            >
              Option 2
            </Checkbox>
          </div>
          <div className={stack({ gap: "sm", direction: "row" })}>
            <Checkbox
              id="react-demo-cbtn-e-tn1"
              appearance="button"
              emphasis="tertiary"
              tone="neutral"
              defaultChecked
            >
              Neutral 1
            </Checkbox>
            <Checkbox
              id="react-demo-cbtn-e-tn2"
              appearance="button"
              emphasis="tertiary"
              tone="neutral"
            >
              Neutral 2
            </Checkbox>
          </div>
        </div>
      </div>

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

<script lang="ts">
  // GENERATED from packages/demos/checkbox/emphasis.demo.tsx — edit the source, not this file.
  import Checkbox from "@pindoba/svelte-checkbox";
  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-demo-cbtn-e-p1" appearance="button" checked>
          Option 1
        </Checkbox>
        <Checkbox id="svelte-demo-cbtn-e-p2" appearance="button">
          Option 2
        </Checkbox>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="svelte-demo-cbtn-e-pn1"
          appearance="button"
          tone="neutral"
          checked
        >
          Neutral 1
        </Checkbox>
        <Checkbox
          id="svelte-demo-cbtn-e-pn2"
          appearance="button"
          tone="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-demo-cbtn-e-s1"
          appearance="button"
          emphasis="secondary"
          checked
        >
          Option 1
        </Checkbox>
        <Checkbox
          id="svelte-demo-cbtn-e-s2"
          appearance="button"
          emphasis="secondary"
        >
          Option 2
        </Checkbox>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="svelte-demo-cbtn-e-sn1"
          appearance="button"
          emphasis="secondary"
          tone="neutral"
          checked
        >
          Neutral 1
        </Checkbox>
        <Checkbox
          id="svelte-demo-cbtn-e-sn2"
          appearance="button"
          emphasis="secondary"
          tone="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-demo-cbtn-e-t1"
          appearance="button"
          emphasis="tertiary"
          checked
        >
          Option 1
        </Checkbox>
        <Checkbox
          id="svelte-demo-cbtn-e-t2"
          appearance="button"
          emphasis="tertiary"
        >
          Option 2
        </Checkbox>
      </div>
      <div class={stack({ gap: "sm", direction: "row" })}>
        <Checkbox
          id="svelte-demo-cbtn-e-tn1"
          appearance="button"
          emphasis="tertiary"
          tone="neutral"
          checked
        >
          Neutral 1
        </Checkbox>
        <Checkbox
          id="svelte-demo-cbtn-e-tn2"
          appearance="button"
          emphasis="tertiary"
          tone="neutral"
        >
          Neutral 2
        </Checkbox>
      </div>
    </div>
  </div>

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

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

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <div>
      <h3>Primary (default)</h3>
      <div :class="stack({ gap: 'lg', direction: 'row' })">
        <div :class="stack({ gap: 'sm', direction: 'row' })">
          <Checkbox id="vue-demo-cbtn-e-p1" appearance="button" :checked="true"
            >Option 1</Checkbox
          >
          <Checkbox id="vue-demo-cbtn-e-p2" appearance="button"
            >Option 2</Checkbox
          >
        </div>
        <div :class="stack({ gap: 'sm', direction: 'row' })">
          <Checkbox
            id="vue-demo-cbtn-e-pn1"
            appearance="button"
            tone="neutral"
            :checked="true"
          >
            Neutral 1
          </Checkbox>
          <Checkbox id="vue-demo-cbtn-e-pn2" appearance="button" tone="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="vue-demo-cbtn-e-s1"
            appearance="button"
            emphasis="secondary"
            :checked="true"
          >
            Option 1
          </Checkbox>
          <Checkbox
            id="vue-demo-cbtn-e-s2"
            appearance="button"
            emphasis="secondary"
          >
            Option 2
          </Checkbox>
        </div>
        <div :class="stack({ gap: 'sm', direction: 'row' })">
          <Checkbox
            id="vue-demo-cbtn-e-sn1"
            appearance="button"
            emphasis="secondary"
            tone="neutral"
            :checked="true"
          >
            Neutral 1
          </Checkbox>
          <Checkbox
            id="vue-demo-cbtn-e-sn2"
            appearance="button"
            emphasis="secondary"
            tone="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="vue-demo-cbtn-e-t1"
            appearance="button"
            emphasis="tertiary"
            :checked="true"
          >
            Option 1
          </Checkbox>
          <Checkbox
            id="vue-demo-cbtn-e-t2"
            appearance="button"
            emphasis="tertiary"
          >
            Option 2
          </Checkbox>
        </div>
        <div :class="stack({ gap: 'sm', direction: 'row' })">
          <Checkbox
            id="vue-demo-cbtn-e-tn1"
            appearance="button"
            emphasis="tertiary"
            tone="neutral"
            :checked="true"
          >
            Neutral 1
          </Checkbox>
          <Checkbox
            id="vue-demo-cbtn-e-tn2"
            appearance="button"
            emphasis="tertiary"
            tone="neutral"
          >
            Neutral 2
          </Checkbox>
        </div>
      </div>
    </div>

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

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

export default function EmphasisDemo() {
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Primary (default)</h3>
        <div class={stack({ gap: "lg", direction: "row" })}>
          <div class={stack({ gap: "sm", direction: "row" })}>
            <Checkbox id="solid-demo-cbtn-e-p1" appearance="button" checked>
              Option 1
            </Checkbox>
            <Checkbox id="solid-demo-cbtn-e-p2" appearance="button">
              Option 2
            </Checkbox>
          </div>
          <div class={stack({ gap: "sm", direction: "row" })}>
            <Checkbox
              id="solid-demo-cbtn-e-pn1"
              appearance="button"
              tone="neutral"
              checked
            >
              Neutral 1
            </Checkbox>
            <Checkbox
              id="solid-demo-cbtn-e-pn2"
              appearance="button"
              tone="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="solid-demo-cbtn-e-s1"
              appearance="button"
              emphasis="secondary"
              checked
            >
              Option 1
            </Checkbox>
            <Checkbox
              id="solid-demo-cbtn-e-s2"
              appearance="button"
              emphasis="secondary"
            >
              Option 2
            </Checkbox>
          </div>
          <div class={stack({ gap: "sm", direction: "row" })}>
            <Checkbox
              id="solid-demo-cbtn-e-sn1"
              appearance="button"
              emphasis="secondary"
              tone="neutral"
              checked
            >
              Neutral 1
            </Checkbox>
            <Checkbox
              id="solid-demo-cbtn-e-sn2"
              appearance="button"
              emphasis="secondary"
              tone="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="solid-demo-cbtn-e-t1"
              appearance="button"
              emphasis="tertiary"
              checked
            >
              Option 1
            </Checkbox>
            <Checkbox
              id="solid-demo-cbtn-e-t2"
              appearance="button"
              emphasis="tertiary"
            >
              Option 2
            </Checkbox>
          </div>
          <div class={stack({ gap: "sm", direction: "row" })}>
            <Checkbox
              id="solid-demo-cbtn-e-tn1"
              appearance="button"
              emphasis="tertiary"
              tone="neutral"
              checked
            >
              Neutral 1
            </Checkbox>
            <Checkbox
              id="solid-demo-cbtn-e-tn2"
              appearance="button"
              emphasis="tertiary"
              tone="neutral"
            >
              Neutral 2
            </Checkbox>
          </div>
        </div>
      </div>

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

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.

PreviewCode

---
// GENERATED from packages/demos/checkbox/switch.demo.tsx — edit the source, not this file.
import Checkbox from "@pindoba/astro-checkbox";
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-demo-csw-p1" appearance="switch" checked>
        Wi-Fi
      </Checkbox>
      <Checkbox id="astro-demo-csw-p2" appearance="switch">
        Bluetooth
      </Checkbox>
    </div>
  </div>

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

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

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

  <div>
    <h3>Sizes</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="astro-demo-csw-sm" appearance="switch" size="sm" checked>
        Small
      </Checkbox>
      <Checkbox id="astro-demo-csw-md" appearance="switch" size="md" checked>
        Medium
      </Checkbox>
      <Checkbox id="astro-demo-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-demo-csw-dis1" appearance="switch" disabled>
        Unchecked
      </Checkbox>
      <Checkbox id="astro-demo-csw-dis2" appearance="switch" disabled checked>
        Checked
      </Checkbox>
    </div>
  </div>
</div>

// GENERATED from packages/demos/checkbox/switch.demo.tsx — edit the source, not this file.
import { Checkbox } from "@pindoba/react-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-demo-csw-p1" appearance="switch" defaultChecked>
            Wi-Fi
          </Checkbox>
          <Checkbox id="react-demo-csw-p2" appearance="switch">
            Bluetooth
          </Checkbox>
        </div>
      </div>

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

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

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

      <div>
        <h3>Sizes</h3>
        <div className={stack({ gap: "sm", direction: "row" })}>
          <Checkbox
            id="react-demo-csw-sm"
            appearance="switch"
            size="sm"
            defaultChecked
          >
            Small
          </Checkbox>
          <Checkbox
            id="react-demo-csw-md"
            appearance="switch"
            size="md"
            defaultChecked
          >
            Medium
          </Checkbox>
          <Checkbox
            id="react-demo-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-demo-csw-dis1" appearance="switch" disabled>
            Unchecked
          </Checkbox>
          <Checkbox
            id="react-demo-csw-dis2"
            appearance="switch"
            disabled
            defaultChecked
          >
            Checked
          </Checkbox>
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/checkbox/switch.demo.tsx — edit the source, not this file.
  import Checkbox from "@pindoba/svelte-checkbox";
  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-demo-csw-p1" appearance="switch" checked>
        Wi-Fi
      </Checkbox>
      <Checkbox id="svelte-demo-csw-p2" appearance="switch">Bluetooth</Checkbox>
    </div>
  </div>

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

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

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

  <div>
    <h3>Sizes</h3>
    <div class={stack({ gap: "sm", direction: "row" })}>
      <Checkbox id="svelte-demo-csw-sm" appearance="switch" size="sm" checked>
        Small
      </Checkbox>
      <Checkbox id="svelte-demo-csw-md" appearance="switch" size="md" checked>
        Medium
      </Checkbox>
      <Checkbox id="svelte-demo-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-demo-csw-dis1" appearance="switch" disabled>
        Unchecked
      </Checkbox>
      <Checkbox id="svelte-demo-csw-dis2" appearance="switch" disabled checked>
        Checked
      </Checkbox>
    </div>
  </div>
</div>

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

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

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

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

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

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

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

// GENERATED from packages/demos/checkbox/switch.demo.tsx — edit the source, not this file.
import { Checkbox } from "@pindoba/solid-checkbox";
import { stack } from "@pindoba/styled-system/patterns";

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

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

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

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

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

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

With Badge

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

PreviewCode

checkbox appearance

Small 3 Medium 3 Large 3

button appearance

Small 3 Medium 3 Large 3

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

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

// GENERATED from packages/demos/checkbox/badge.demo.tsx — edit the source, not this file.
import { Checkbox } from "@pindoba/react-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-demo-badge-cb-sm" size="sm" defaultChecked>
            Small{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Checkbox>
          <Checkbox id="react-demo-badge-cb-md" size="md" defaultChecked>
            Medium{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Checkbox>
          <Checkbox id="react-demo-badge-cb-lg" size="lg" defaultChecked>
            Large{" "}
            <Badge tone="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-demo-badge-cbtn-sm"
            appearance="button"
            size="sm"
            defaultChecked
          >
            Small{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Checkbox>
          <Checkbox
            id="react-demo-badge-cbtn-md"
            appearance="button"
            size="md"
            defaultChecked
          >
            Medium{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Checkbox>
          <Checkbox
            id="react-demo-badge-cbtn-lg"
            appearance="button"
            size="lg"
            defaultChecked
          >
            Large{" "}
            <Badge tone="primary" size="sm">
              3
            </Badge>
          </Checkbox>
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/checkbox/badge.demo.tsx — edit the source, not this file.
  import Checkbox from "@pindoba/svelte-checkbox";
  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-demo-badge-cb-sm" size="sm" checked>
        Small <Badge tone="primary" size="sm">3</Badge>
      </Checkbox>
      <Checkbox id="svelte-demo-badge-cb-md" size="md" checked>
        Medium <Badge tone="primary" size="sm">3</Badge>
      </Checkbox>
      <Checkbox id="svelte-demo-badge-cb-lg" size="lg" checked>
        Large <Badge tone="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-demo-badge-cbtn-sm"
        appearance="button"
        size="sm"
        checked
      >
        Small <Badge tone="primary" size="sm">3</Badge>
      </Checkbox>
      <Checkbox
        id="svelte-demo-badge-cbtn-md"
        appearance="button"
        size="md"
        checked
      >
        Medium <Badge tone="primary" size="sm">3</Badge>
      </Checkbox>
      <Checkbox
        id="svelte-demo-badge-cbtn-lg"
        appearance="button"
        size="lg"
        checked
      >
        Large <Badge tone="primary" size="sm">3</Badge>
      </Checkbox>
    </div>
  </div>
</div>

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

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

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

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

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

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

Leading & Trailing slots

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

PreviewCode

---
// GENERATED from packages/demos/checkbox/leading-trailing.demo.tsx — edit the source, not this file.
import Checkbox from "@pindoba/astro-checkbox";
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-demo-lt-cbtn-${size}`}
          appearance="button"
          size={size}
          fullWidth
          checked={size === "md"}
        >
          <Stamp slot="leading" emphasis="adaptive" size="xs" shape="circle">
            <Bell />
          </Stamp>
          <Badge slot="trailing" emphasis="adaptive" size="sm">
            12
          </Badge>
          Notifications
        </Checkbox>
      ))}
    </div>
  </div>

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

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

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

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={size}
              id={`react-demo-lt-cbtn-${size}`}
              appearance="button"
              size={size}
              fullWidth
              defaultChecked={size === "md"}
              leading={
                <Stamp emphasis="adaptive" size="xs" shape="circle">
                  <Bell />
                </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={size}
              id={`react-demo-lt-cbtn-leading-${size}`}
              appearance="button"
              size={size}
              fullWidth
              defaultChecked={size === "md"}
              leading={
                <Stamp emphasis="adaptive" size="xs" shape="circle">
                  <Bell />
                </Stamp>
              }
            >
              Notifications
            </Checkbox>
          ))}
        </div>
      </div>

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

<script lang="ts">
  // GENERATED from packages/demos/checkbox/leading-trailing.demo.tsx — edit the source, not this file.
  import Checkbox from "@pindoba/svelte-checkbox";
  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-demo-lt-cbtn-${size}`}
          appearance="button"
          {size}
          fullWidth
          checked={size === "md"}
        >
          {#snippet leading()}
            <Stamp emphasis="adaptive" size="xs" shape="circle">
              <LucideBell />
            </Stamp>
          {/snippet}
          {#snippet trailing()}
            <Badge emphasis="adaptive" size="sm">12</Badge>
          {/snippet}
          Notifications
        </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-demo-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-demo-lt-cbtn-trailing-${size}`}
          appearance="button"
          {size}
          fullWidth
          checked={size === "md"}
        >
          {#snippet trailing()}
            <Badge emphasis="adaptive" size="sm">12</Badge>
          {/snippet}
          Notifications
        </Checkbox>
      {/each}
    </div>
  </div>

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

<script setup lang="ts">
// GENERATED from packages/demos/checkbox/leading-trailing.demo.tsx — edit the source, not this file.
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";

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

<template>
  <div :class="stack({ gap: 'lg', direction: 'column' })">
    <div>
      <h3>button appearance — both slots</h3>
      <div :class="stack({ gap: 'sm', direction: 'column' })">
        <Checkbox
          v-for="size in sizes"
          :key="size"
          :id="`vue-demo-lt-cbtn-${size}`"
          appearance="button"
          :size="size"
          :fullWidth="true"
          :checked="size === 'md'"
        >
          <template #leading>
            <Stamp emphasis="adaptive" size="xs" shape="circle">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-bell"
                aria-hidden="true"
              >
                <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>
            </Stamp>
          </template>
          <template #trailing>
            <Badge emphasis="adaptive" size="sm">12</Badge>
          </template>
          Notifications
        </Checkbox>
      </div>
    </div>

    <div>
      <h3>button appearance — leading only</h3>
      <div :class="stack({ gap: 'sm', direction: 'column' })">
        <Checkbox
          v-for="size in sizes"
          :key="size"
          :id="`vue-demo-lt-cbtn-leading-${size}`"
          appearance="button"
          :size="size"
          :fullWidth="true"
          :checked="size === 'md'"
        >
          <template #leading>
            <Stamp emphasis="adaptive" size="xs" shape="circle">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-bell"
                aria-hidden="true"
              >
                <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>
            </Stamp>
          </template>
          Notifications
        </Checkbox>
      </div>
    </div>

    <div>
      <h3>button appearance — trailing only</h3>
      <div :class="stack({ gap: 'sm', direction: 'column' })">
        <Checkbox
          v-for="size in sizes"
          :key="size"
          :id="`vue-demo-lt-cbtn-trailing-${size}`"
          appearance="button"
          :size="size"
          :fullWidth="true"
          :checked="size === 'md'"
        >
          <template #trailing>
            <Badge emphasis="adaptive" size="sm">12</Badge>
          </template>
          Notifications
        </Checkbox>
      </div>
    </div>

    <div>
      <h3>checkbox appearance</h3>
      <div :class="stack({ gap: 'sm', direction: 'column' })">
        <Checkbox
          v-for="size in sizes"
          :key="size"
          :id="`vue-demo-lt-cb-${size}`"
          :size="size"
          :checked="size === 'md'"
        >
          <template #trailing>
            <Badge emphasis="adaptive" size="sm">5</Badge>
          </template>
          Tasks
        </Checkbox>
      </div>
    </div>
  </div>
</template>

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

const sizes = ["sm", "md", "lg"] as const;
export default function LeadingTrailingDemo() {
  return (
    <div class={stack({ gap: "lg", direction: "column" })}>
      <div>
        <h3>button appearance — both slots</h3>
        <div class={stack({ gap: "sm", direction: "column" })}>
          <For each={sizes}>
            {(size) => (
              <Checkbox
                id={`solid-demo-lt-cbtn-${size}`}
                appearance="button"
                size={size}
                fullWidth
                checked={size === "md"}
                leading={
                  <Stamp emphasis="adaptive" size="xs" shape="circle">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-bell"
                      aria-hidden="true"
                    >
                      <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>
                  </Stamp>
                }
                trailing={
                  <Badge emphasis="adaptive" size="sm">
                    12
                  </Badge>
                }
              >
                Notifications
              </Checkbox>
            )}
          </For>
        </div>
      </div>

      <div>
        <h3>button appearance — leading only</h3>
        <div class={stack({ gap: "sm", direction: "column" })}>
          <For each={sizes}>
            {(size) => (
              <Checkbox
                id={`solid-demo-lt-cbtn-leading-${size}`}
                appearance="button"
                size={size}
                fullWidth
                checked={size === "md"}
                leading={
                  <Stamp emphasis="adaptive" size="xs" shape="circle">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      class="lucide lucide-bell"
                      aria-hidden="true"
                    >
                      <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>
                  </Stamp>
                }
              >
                Notifications
              </Checkbox>
            )}
          </For>
        </div>
      </div>

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

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

Custom Styling

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

PreviewCode

Custom input style via passThrough

Rounded checkbox

Custom props via passThrough

Accept terms

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

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>Custom input style via passThrough</h3>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Checkbox
        id="astro-demo-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="astro-demo-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

// GENERATED from packages/demos/checkbox/custom.demo.tsx — edit the source, not this file.
import { Checkbox } from "@pindoba/react-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="react-demo-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="react-demo-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">
  // GENERATED from packages/demos/checkbox/custom.demo.tsx — edit the source, not this file.
  import Checkbox from "@pindoba/svelte-checkbox";
  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="svelte-demo-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="svelte-demo-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">
// GENERATED from packages/demos/checkbox/custom.demo.tsx — edit the source, not this file.
import { Checkbox } from "@pindoba/vue-checkbox";
import { stack } from "@pindoba/styled-system/patterns";
</script>

<template>
  <div :class="stack({ gap: 'xl', direction: 'column' })">
    <div>
      <h3>Custom input style via passThrough</h3>
      <div :class="stack({ gap: 'md', direction: 'column' })">
        <Checkbox
          id="vue-demo-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="vue-demo-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>

Custom input style via passThrough

Rounded checkbox

Custom props via passThrough

Accept terms

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

export default function CustomDemo() {
  return (
    <div class={stack({ gap: "xl", direction: "column" })}>
      <div>
        <h3>Custom input style via passThrough</h3>
        <div class={stack({ gap: "md", direction: "column" })}>
          <Checkbox
            id="solid-demo-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="solid-demo-checkbox-custom-props"
            passThrough={{
              root: {
                props: { "data-testid": "my-checkbox" },
              },
              input: {
                props: { "aria-label": "Accept terms and conditions" },
              },
            }}
          >
            Accept terms
          </Checkbox>
        </div>
      </div>
    </div>
  );
}

Setting indeterminate from a script (Astro)

indeterminate is a DOM property, so assigning input.indeterminate = true after load emits no event and the checkbox never gets aria-checked="mixed". In Astro, or any vanilla script, call setCheckboxIndeterminate(input, true) from @pindoba/astro-checkbox/runtime (also exported by @pindoba/core-checkbox) instead: it sets the property and syncs aria-checked (mixed while indeterminate, removed otherwise), and a later click still releases the mixed state.

#Default

#Size

checkbox appearance

button appearance

#Button

Primary (default)

Danger

Warning

Success

#Emphasis

Primary (default)

Secondary

Tertiary

Secondary + tone

#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

#Setting indeterminate from a script (Astro)

Default

Size

Button

Emphasis

Switch

With Badge

Leading & Trailing slots

Custom Styling

Setting indeterminate from a script (Astro)