Checkbox

A control that allows the user to toggle between checked and not checked.

Usage

SCheckbox({ label: 'Accept terms and conditions', checked: this.terms!! })
SCheckbox({ label: 'Enable notifications', defaultChecked: true })
SCheckbox({ label: 'Disabled', disabled: true })
SCheckbox({ label: 'Required', invalid: true })

Approximate web preview — the HarmonyOS rendering is the reference.

Indeterminate

A "select all" checkbox driven by its children.

SCheckbox({
  label: 'Select all',
  checked: this.allChecked,
  indeterminate: this.someChecked && !this.allChecked,
  onCheckedChange: (v: boolean) => this.setAll(v)
})

Approximate web preview — the HarmonyOS rendering is the reference.

Sizes, description, card

sizing: 'sm' | 'default' | 'lg'; card wraps label and description in a pressable bordered box.

SCheckbox({ label: 'Small', sizing: 'sm', defaultChecked: true })
SCheckbox({ label: 'Large', sizing: 'lg', defaultChecked: true })
SCheckbox({ label: 'Accept terms', description: 'By clicking this you agree to our terms.' })
SCheckbox({ label: 'Enable notifications', description: 'You can enable or disable them at any time.',
  card: true, defaultChecked: true })

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SCheckbox

shadcn-vue Checkbox: size-4 rounded-[4px] border border-input shadow-xs, checked bg-primary border-primary text-primary-foreground with a check icon (size-3.5).

Variants: sizing sm | default | lg, description (muted text under the label) and card (a bordered, pressable choice card, highlighted while checked).

indeterminate shows a minus mark (shadcn-vue's 'indeterminate' model value); tapping it emits true, the parent is expected to clear indeterminate. The optional label is part of the tap target. React to changes with onCheckedChange / !! (the control's own tap consumes .onClick() on SCheckbox).

Prop	Type	Default	Description
checked!!	boolean | undefined	undefined	Controlled state (use with !!). Leave undefined for uncontrolled.
defaultChecked	boolean	false
indeterminate	boolean	false
disabled	boolean	false
invalid	boolean	false	Error look (aria-invalid: destructive border).
label	ResourceStr | undefined	undefined	Text shown to the right; also tappable.
description	ResourceStr | undefined	undefined	Muted helper text under the label.
sizing	ChoiceSize ChoiceSize = 'sm' | 'default' | 'lg'	'default'
card	boolean	false	Bordered choice card around box, label and description.
tokens	CheckboxTokens	{}	Per-instance token overrides (instance → theme --checkbox-* → recipe), see {@link CheckboxTokens}.

Event	Type	Default	Description
onCheckedChange	(v: boolean) => void	() => { }