Checkbox Props

Appearance

appearance

"button" "checkbox" "switch"

default checkbox

Visual appearance variant of the control.
background

"transparent" "surface.peak" "surface.hill" "surface.base" "surface.valley" "surface.ground"

Surface background from the Panel scale (`surface.peak` → `surface.ground`, or `transparent`).
border

"none" "default" "bold" "muted" "accent"

Resting border style for the `button` appearance. Secondary/tertiary default to `"muted"` and promote to `"default"` when checked; pass `"none"` to remove it or `"bold" | "accent"` to intensify it.
emphasis

"primary" "secondary" "tertiary"

default primary

Which surface ramp the panel paints with: `primary` is the filled tone accent (with contrast text), `secondary` the tone's own surface tint, `tertiary` the neutral ramp with tone-accent text. `background` then picks the step on that ramp.
radius

"inherit" "none" "2xl" "lg" "md" "sm" "xl" "inner" "xs" "2xs" "3xl" "4xl" "5xl" "6xl" "full"

Corner radius of the `appearance="button"` surface. Defaults to the size-derived radius from the control sizing scale. Pass `"inner"` to compute a concentric radius from a parent Panel's exported `--panel-out-radius`/`--panel-out-padding` (this is how `Choice` keeps its segmented items nested inside the group container).
size

"lg" "md" "sm"

default md

Size variant.
tone

"inherit" "cyan" "danger" "dynamic" "mauve" "neutral" "pink" "primary" "sage" "slate" "stone" "success" "teal" "violet" "warning"

default "primary"

Color scheme applied via `colorPalette`. For the `checkbox` appearance this sets the indicator accent color; for the `button` appearance it sets the Panel tone color.
translucent

boolean

Renders the surface with a translucent (frosted) background.

Layout

fullWidth

boolean

Stretch the component to fill the available width.

Behavior

as

"div" "section" "article" "aside" "main" "header" "footer" "nav" "dialog" "form" "fieldset" "ul" "ol" "li" "a" "button" "label" "span" "kbd"

default "label"

Root element tag. Set `"span"` for a label-less indicator.

Events

onIndeterminateChange

(indeterminate: boolean) => void

Fired when a click leaves (or a script enters) the indeterminate state — the browser clears the DOM property on click, so a controlled `indeterminate` would otherwise go stale. Svelte can `bind:indeterminate` instead; React/Vue/Solid pair this with the `indeterminate` prop.

Slots

children slot svelte

Snippet

The checkbox's label content.
leading slot svelte

Snippet

Leading affix content (icon/addon before the label).
trailing slot svelte

Snippet

Trailing affix content (badge/addon after the label).

Advanced

element binding svelte

HTMLElement null

Bindable reference to the root label element.
passThrough

CheckboxPassThrough< RootElementAttributes, InputElementAttributes >

Per-slot style and attribute override bag. Each slot's `style` accepts a Panda CSS `SystemStyleObject` merged with the base styles, and `props` forwards arbitrary HTML attributes onto the element.