Switch

Overview

A toggle switch built on Reka UI's SwitchRoot, with a sliding thumb indicator.

Theme entry: Switch

Props

Name	Type	Required	Default	Description
themeOverride	Object		null	A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants.
class	string|array|object		undefined	Additional CSS classes to apply to the switch root.
defaultValue	boolean		undefined	The default checked state when uncontrolled.
modelValue	boolean		undefined	The controlled checked state (used with v-model).
disabled	boolean		undefined	Whether the switch is disabled.
id	string		undefined	The id applied to the underlying input element.
value	string		undefined	The value submitted with a form when checked.
trueValue	boolean|string		undefined	The value representing the checked state.
falseValue	boolean|string		undefined	The value representing the unchecked state.
as	string|object		undefined	The element or component to render as.
asChild	boolean		false	When true, merges props onto the child element instead of rendering a wrapper.
name	string		undefined	The name submitted with a form.
required	boolean		undefined	Whether the field is required.

Slots

thumb

Scoped slot.

Events

Name	Description
update:modelValue	Emitted when the value changes.

Full event reference

Source

client/lib/controls/switch/Switch.vue