Ui3nSwitch

Switch component for toggling boolean values.

Props

Name	Type	Default	Description
id	string | undefined	—	Root element id
name	string | undefined	—	HTML name attribute for form submission
modelValue*	boolean	—	Current switch value
size	string | number | undefined	16	Switch size
color	string | undefined	"var(--color-icon-control-accent-default)"	Switch color
disabled	boolean | undefined	false	Whether switch is disabled

Events

Event Name	Arguments / Value Type	Description
update:modelValue	value: boolean	—
change	value: boolean	—

Slots

Slot Name	Scope Props (v-slot)	Description
#default	—	Default slot

Public Methods & Exposes

Method Name	Signature / Type	Description
clear()	() => void	—

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-switch-color	var(--color-icon-control-accent-default)
--ui3n-switch-dot-margin	calc(var(--_switch-size) / 8)
--ui3n-switch-dot-size	calc(var(--_switch-size) / 4 * 3)
--ui3n-switch-font-color	var(--color-text-control-primary-default)
--ui3n-switch-font-size	12px
--ui3n-switch-font-weight	500
--ui3n-switch-off-color	var(--color-bg-table-cell-pressed)
--ui3n-switch-size	16px

Usage Examples

Simple switch

Simple switch

Basic switch toggle

Switch with label

Switch with label

Switch with label using default slot

Customized switch

Customized switch

Switch with custom size and color