Switch

Usage

<script setup lang="ts">
import { ref } from 'vue'

const enabled = ref(true)
</script>

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

Toggle State

Click, Enter, or Space toggles the switch.

Sizes

size also sets the label's font size and gap.

Disabled

Loading

Set loading while a server confirms the change. The thumb stays on the old value as a spinning ring, and toggling is blocked.

Labels

A changing label crossfades; labelPlacement puts it before or after the track. The default slot renders as-is, without the transition.

Custom Colors

Override --tuff-switch-active-color, --tuff-switch-track-color, or --tuff-switch-thumb-color.

Settings Row

When state text sits outside the switch, render it with TxTextTransformer to get the same transition.

Best Practices

• Use a switch for settings that apply immediately; use a checkbox for values submitted with a form.
• When the server must confirm, set loading and write modelValue only on success. On failure, just clear loading.
• Put the control's name in label ("Compact mode"). Keep state text such as "On" outside, rendered with TxTextTransformer, so it isn't announced twice.
• Recolor through the CSS variables, not by rewriting .tuff-switch__track rules.

API Reference

Props

Events

Slots

Overview

• The root is a native <button role="switch"> with aria-checked.
• It is controlled: a toggle only emits, and the switch updates once the parent writes modelValue back.
• disabled and loading both set the native disabled attribute; loading keeps full opacity and sets aria-busy="true".
• With visible text (label or the slot), no aria-label is rendered.
• Under reduced motion, the loading ring stops spinning.

Technologies

• The state classes is-active, is-disabled, is-loading, and has-label sit on the root; the track and thumb are .tuff-switch__track and .tuff-switch__thumb.
• Source: packages/tuffex/packages/components/src/switch/.