Components

Blocks

  1. Checkbox
    1. Default
    2. Size
    3. Button
    4. With Badge
    5. Custom Styling
    6. Props

Checkbox

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

Default

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

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

Size

Three sizes are available across all appearances.

checkbox appearance

button appearance

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

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

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

Button

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

Primary (default)

Danger

Warning

Success

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

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

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

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

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

With Badge

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

checkbox appearance

button appearance

---
import Checkbox from "../Checkbox.astro";
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-badge-cb-sm" size="sm" checked>
        Small <Badge feedback="primary" size="sm">3</Badge>
      </Checkbox>
      <Checkbox id="astro-badge-cb-md" size="md" checked>
        Medium <Badge feedback="primary" size="sm">3</Badge>
      </Checkbox>
      <Checkbox id="astro-badge-cb-lg" size="lg" checked>
        Large <Badge feedback="primary" size="sm">3</Badge>
      </Checkbox>
    </div>
  </div>

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

Custom input style via passThrough

Custom props via passThrough

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

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

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

Props

Prop
appearance
appearance

Visual style of the checkbox. checkbox: Default square indicator. button: Styled as a button using Panel composition.

Type "checkbox" | "button"
Default "checkbox"
Required No
feedback
feedback

Color scheme applied via colorPalette. For checkbox appearance this sets the indicator accent color. For button appearance this sets the Panel feedback color.

Type "primary" | "neutral" | "success" | "danger" | "warning"
Default "primary"
Required No
size
size

Size of the component.

Type "sm" | "md" | "lg"
Default "md"
Required No
fullWidth
fullWidth

Expand the checkbox to fill its container width.

Type boolean
Default false
Required No
id
id

Unique identifier for the checkbox input, required for proper label association.

Type string
Default -
Required Yes
checked
checked

Controls the checked state of the checkbox.

Type boolean
Default undefined
Required No
indeterminate
indeterminate

Controls the indeterminate (partially checked) state of the checkbox.

Type boolean
Default undefined
Required No
disabled
disabled

Disables the checkbox.

Type boolean
Default undefined
Required No
passThrough
passThrough

Per-slot style and attribute overrides.

Type { root?: { style?: SystemStyleObject; props?: HTMLLabelAttributes }; input?: { style?: SystemStyleObject; props?: HTMLInputAttributes } }
Default undefined
Required No
children
children

Label content rendered next to the checkbox.

Type Snippet
Default undefined
Required No
...rest
...rest

Standard HTML input attributes (excluding type).

Type Omit<HTMLInputAttributes, 'type'>
Default -
Required No
  1. Checkbox
    1. Default
    2. Size
    3. Button
    4. With Badge
    5. Custom Styling
    6. Props