TSwitch / 开关

Switch for toggling between two states. Supports labels, descriptions, multiple sizes, row layout, and validation. / 开关用于在两个状态间切换，支持标签、描述文字、多种尺寸、行布局和验证状态。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
label	string	—	Label text / 标签文本
description	string	—	Description text (grey) / 描述文字
size	'sm' | 'md' | 'lg'	'md'	Switch size
row	boolean	false	Row layout (label left, switch right)
disabled	boolean	false	Disabled
validation	'valid' | 'invalid'	—	Validation state

v-model

v-model	Type / 类型	Description / 说明
v-model	boolean	Toggled state / 开关状态

Basic Usage / 基础用法

<script setup lang="ts">
import { TSwitch } from '@gulcc/tabler-vue'

const notifications = ref(true)
const darkMode = ref(false)
</script>

<template>
  <TSwitch v-model="notifications" label="Enable Notifications / 启用通知" />
  <TSwitch v-model="darkMode" label="Dark Mode / 深色模式" />
  <TSwitch v-model="option" label="Disabled / 禁用" disabled />
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TSwitch } from '@gulcc/tabler-vue'
</script>

<template>
  <!-- With description / 带描述文字 -->
  <TSwitch
    v-model="emailNotify"
    label="Email Notifications / 邮件通知"
    description="Receive email updates about your account / 接收账户相关的邮件更新"
  />

  <!-- Row layout / 行布局（标签左，开关右） -->
  <TSwitch
    v-model="pushNotify"
    label="Push Notifications / 推送通知"
    description="Receive push notifications on your device"
    row
  />

  <!-- Sizes / 尺寸 -->
  <TSwitch v-model="val1" size="sm" label="Small / 小" />
  <TSwitch v-model="val2" size="md" label="Medium / 中" />
  <TSwitch v-model="val3" size="lg" label="Large / 大" />

  <!-- Validation / 验证 -->
  <TSwitch v-model="agreed" validation="invalid" label="Required agreement / 必选同意" />
</template>

Tips / 避坑指南

• description renders as grey secondary text below the label — useful for explaining what the switch controls
• When row=true, the label appears on the left with the switch on the right (like a settings row)
• Without label or description, the switch renders compact mode (.form-check-single)
• size="lg" adds the form-switch-lg class for a larger toggle