Switch

Toggle switch component. Built on Tabler form-switch, supports standard and large sizes, description text, row layout, and compact single mode.

Basic Usage

Show Code

<TSwitch v-model="val" label="Wi-Fi" />

Two Sizes

Show Code

<TSwitch v-model="val" label="Default" />
<TSwitch v-model="val" label="Large" size="lg" />

Description Text

Show Code

<TSwitch v-model="val" label="Bluetooth" description="2 connected devices" />

Disabled State

Show Code

<TSwitch v-model="val" label="Disabled" disabled />

Row Layout (Settings Style)

The row prop places the label on the left and the switch on the right, perfect for settings pages.

Show Code

<TSwitch v-model="val" row label="Push Notifications" />
<TSwitch v-model="val" row label="Email" description="Daily digest" />

Single Switch (No Label)

When label, description, and the default slot are all omitted, the switch automatically uses form-check-single for a compact layout.

Show Code

<TSwitch v-model="val" />
<TSwitch v-model="val" size="sm" />

API

Props

Prop	Type	Default	Description
v-model	boolean	false	Switch state
label	string	—	Label text
description	string	—	Description (muted small text)
size	'sm' | 'md' | 'lg'	'md'	Switch size (sm/md: default, lg: form-switch-lg)
row	boolean	false	Row layout: label left + switch right
disabled	boolean	false	Disabled state
validation	'valid' | 'invalid'	—	Validation state
id	string	—	Native id
name	string	—	Native name