Switch

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

Usage

@Local airplane: boolean = false;

SSwitch({ label: 'Airplane Mode', checked: this.airplane!! })
SSwitch({ label: 'Wi-Fi', defaultChecked: true })
SSwitch({ label: 'Disabled', disabled: true })

Approximate web preview — the HarmonyOS rendering is the reference.

Sizes & cards

A settings list built from card switches.

SSwitch({ label: 'Small', sizing: 'sm', defaultChecked: true })
SSwitch({ label: 'Large', sizing: 'lg', defaultChecked: true })
SSwitch({ label: 'Marketing emails', description: 'Receive emails about new products and features.',
  card: true })
SSwitch({ label: 'Security emails', description: 'Receive emails about your account security.',
  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.

SSwitch

shadcn-vue Switch: h-[1.15rem] w-8 rounded-full border border-transparent shadow-xs, unchecked bg-input dark:bg-input/80, checked bg-primary; the size-4 thumb slides translate-x-[calc(100%-2px)].

Variants: sizing sm | default | lg, description (muted text under the label) and card (label and description in a bordered, pressable card with the switch on the right; highlighted while on).

React to changes with onCheckedChange / !! (the control's own tap consumes .onClick() on SSwitch).

Prop	Type	Default	Description
checked!!	boolean | undefined	undefined	Controlled state (use with !!). Leave undefined for uncontrolled.
defaultChecked	boolean	false
disabled	boolean	false
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: texts on the left, switch on the right.
tokens	SwitchTokens	{}	Per-instance token overrides (instance → theme --switch-* → recipe), see {@link SwitchTokens}.

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