Switch

Tactile toggles with clear state color and movement.
Status: Beta

Basic Usage

<template>
  <TuffSwitch v-model="enabled" />
  <TuffSwitch v-model="enabled" size="small" />
</template>

Movement and color change together.

Demo will load when visible.

<template>
  <TuffSwitch :model-value="false" />
  <TuffSwitch :model-value="true" />
</template>

Property	Type	Default	Description
disabled	-	-	Removes focusability and blocks click, Enter, and Space toggles.
size	smalldefaultlarge	-	Visual size variant. The default size does not add a size modifier class.

Property	Type	Description
modelValue		Checked state controlled by v-model.
size	smalldefaultlarge	Visual size variant.
disabled		Disables focus and prevents pointer or keyboard toggles.

Event	Params	Description
`update:modelValue`	`(value: boolean) => void`	v-model update emitted after an enabled click, Enter, or Space toggle.
`change`	`(value: boolean) => void`	Emitted with the next checked state after an enabled toggle.

Switch paired with labels.

Demo will load when visible.

<template>
  <TxTag>Notifications</TxTag>
  <TuffSwitch :model-value="true" />
</template>