Toggle

Props

Prop	Type	Default	Options	Description
modelValue	boolean	false	—	On (true) or off (false).
disabled	boolean	false	—	Disables interaction and applies disabled styles (including on-state muted track)
size	string	"m"	m, l	Track and thumb dimensions
name	string	""	—	name on the host for form submission
value	string	"on"	—	Value submitted when the toggle is on
ariaLabel	string	""	—	Accessible name when the default slot has no visible label
testSelectors	object	See Test Selectors	—	Override data-test attributes

See Component API — Props.

Slots

Name	Description
(default)	Optional label beside the switch. When present, the control uses aria-labelledby (unless aria-label is set, which takes precedence).

See Component API — Slots.

Events

Name	Detail	Description
update:modelValue	boolean	Emitted when the user changes the state

From the DOM, this is a CustomEvent. The payload is in event.detail, and with Vue’s custom-element runtime it is usually a one-element array — read event.detail[0] (same normalization as v-catnip-model in packages/components/src/core/directives.ts). In Vue templates, listen with @update:modelValue="fn"; the handler often receives the native event, so use fn(ev) and unwrap ev.detail as above.

See Component API — Events.

Test Selectors

Attribute	Default Value
root	catnip-toggle
switch	catnip-toggle-switch

See Component API — Test selectors.

Forms

When native form behaviour is enabled, the submitted value is the value attribute while model-value is true, and the field is omitted (or empty) when off. Boolean model-value is handled explicitly for catnip-toggle so ElementInternals.setFormValue receives a string (or null), not a raw boolean.