Toggle & Group

A two-state button that can be either on or off.

Usage

SToggle({ icon: 'bold', label: 'Toggle bold' })
SToggle({ variant: 'outline', icon: 'italic', label: 'Toggle italic' })
SToggle({ icon: 'underline', text: 'Underline', defaultPressed: true })
SToggle({ sizing: 'sm', icon: 'bold', label: 'Small' })
SToggle({ sizing: 'lg', icon: 'bold', label: 'Large' })
SToggle({ icon: 'bold', label: 'Disabled', disabled: true })

Approximate web preview — the HarmonyOS rendering is the reference.

Controlled

Bind pressed with !! like v-model:pressed.

@Local bold: boolean = true;

SToggle({ pressed: this.bold!!, variant: 'outline', icon: 'bold', text: 'Bold' })

Approximate web preview — the HarmonyOS rendering is the reference.

Toggle Group

A set of two-state buttons joined into one control. value is a string array for both single and multiple groups.

SToggleGroup({ type: 'multiple', variant: 'outline' }) {
  SToggleGroupItem({ value: 'bold', icon: 'bold', label: 'Toggle bold' })
  SToggleGroupItem({ value: 'italic', icon: 'italic', label: 'Toggle italic' })
  SToggleGroupItem({ value: 'underline', icon: 'underline', label: 'Toggle underline' })
}
SToggleGroup({ type: 'single', sizing: 'sm' }) { ... }

Approximate web preview — the HarmonyOS rendering is the reference.

Toggle Group — controlled

@Local alignValue: string[] = ['left'];

SToggleGroup({ type: 'single', variant: 'outline', value: this.alignValue!! }) {
  SToggleGroupItem({ value: 'left', text: 'Left' })
  SToggleGroupItem({ value: 'center', text: 'Center' })
  SToggleGroupItem({ value: 'right', text: 'Right' })
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SToggle

shadcn-vue Toggle: a two-state button that can be either on or off.

The toggle handles taps itself; observe changes with onPressedChange (or !!). A native .onClick() on SToggle does not fire because the inner tap wins.

Prop	Type	Default	Description
pressed!!	boolean | undefined	undefined	Controlled state (use with !!). Leave undefined for uncontrolled.
defaultPressed	boolean	false
variant	ToggleVariant ToggleVariant = 'default' | 'outline'	'default'
sizing	ToggleSize ToggleSize = 'default' | 'sm' | 'lg'	'default'
text	ResourceStr | undefined	undefined
icon	string | undefined	undefined	Leading lucide icon name.
label	string | undefined	undefined	Accessible name; required for icon-only toggles.
disabled	boolean	false
tokens	ToggleTokens	{}	Per-instance token overrides (instance → theme --toggle-* → recipe), see {@link ToggleTokens}.

Event	Type	Default	Description
onPressedChange	(pressed: boolean) => void	() => { }

Slots: children (trailing closure)

SToggleGroup

shadcn-vue ToggleGroup: a set of two-state buttons joined into one control.

value is always a string array (for type: 'single' it holds at most one entry; tapping the selected item again clears it, like Radix). In single mode the selection is one indicator that slides between items (motion key toggle-group), so a selection change never flashes or cross-fades two items.

Prop	Type	Default	Description
type	ToggleGroupType ToggleGroupType = 'single' | 'multiple'	'single'
value!!	string[] | undefined	undefined	Controlled pressed items (use with !!). Leave undefined for uncontrolled.
defaultValue	string[]	[]
variant	ToggleVariant ToggleVariant = 'default' | 'outline'	'default'
sizing	ToggleSize ToggleSize = 'default' | 'sm' | 'lg'	'default'
disabled	boolean	false
spacing	number	0	Gap between items in vp (shadcn spacing). 0 = joined segments.
wrap	boolean	false	Wrap items onto several lines when they do not fit (use with spacing).
deselectable	boolean	true	single only: tapping the selected item again clears the selection (Radix default: true).

Event	Type	Default	Description
onValueChange	(value: string[]) => void	() => { }

Slots: children (trailing closure)

SToggleGroupItem

One item of a toggle group; inherits variant / sizing from the group.

Prop	Type	Default	Description
value	string	''
text	ResourceStr | undefined	undefined
icon	string | undefined	undefined	Leading lucide icon name.
label	string | undefined	undefined	Accessible name; required for icon-only items.
disabled	boolean	false

Slots: children (trailing closure)