Toggle

SToggle is a two-state toggle button (pressed/unpressed) built on Reka UI: it carries the button role with aria-pressed and data-state. It is used on its own (for example, "bold" in an editor) or inside SToggleGroup — then the group manages the state.

Single toggle

Sizes

Group (SToggleGroup)

Groups related toggles. type="single" keeps one item active, type="multiple" allows any subset. Items are set with the options prop or with SToggles placed in the slot (each needs a value).

Multiple selection

Color

The color prop sets the color of the on state from the palette.

API

SToggle

Props

Name	Type	Default	Description
color	string	undefined	Color of the on state: a name from the palette (primary/teal/teal-10).
value	string	undefined	Item value inside SToggleGroup (unique within the group). Not set on a standalone toggle.
size	"md" | "sm" | "lg"	"md"	Size: sm, md or lg.
square	boolean	undefined	Square corners: removes the border radius (rounded by default).
disabled	boolean	false	Disables the toggle.
aria-label	string	undefined	Accessible name: set it when the toggle content is only an icon.
model-value	boolean	false	Pressed state of a standalone toggle. Two-way binding via v-model (not used inside SToggleGroup — the group manages the state).

Events

Name	Signature	Description
update:modelValue	(value: boolean) => void	Emitted when modelValue changes. Used for two-way binding (v-model).

Slots

Name	Description
default	Toggle content: text and/or an icon.

SToggleGroup

Props

Name	Type	Default	Description
type	"single" | "multiple"	"single"	Selection mode: single allows one active item, multiple any subset.
size	"md" | "sm" | "lg"	"md"	Size of the toggles in the group.
options	{ label?: string; value: string; disabled?: boolean }[]	undefined	Group items (an alternative to the default slot with hand-written SToggles).
disabled	boolean	undefined	Disables the whole group and all its items.
aria-label	string	undefined	Accessible name of the group (aria-label).
model-value	string | string[]	undefined	Selected value (single) or array of values (multiple). Two-way bound via v-model.

Events

Name	Signature	Description
update:modelValue	( value: | string | string[] | undefined ) => void	Emitted when modelValue changes. Used for two-way binding (v-model).

Slots

Name	Description
default	Custom set of SToggle (instead of the options prop); give each one a value.