TCheckbox / 复选框

Checkbox for selecting one or more options. Supports independent and group mode (via TCheckboxGroup), inline layout, indeterminate state, and validation. / 复选框用于选择一个或多个选项。支持独立模式和组模式（通过 TCheckboxGroup）、内联布局、半选状态和验证样式。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
label	string	—	Label text / 标签文本
value	any	—	Value (for group mode) / 复选框的值
disabled	boolean	false	Disabled
inline	boolean	false	Inline layout / 内联排列
indeterminate	boolean	false	Indeterminate state (visual only) / 半选状态
validation	'valid' | 'invalid'	—	Validation state
required	boolean	false	Required

v-model

v-model	Type / 类型	Description / 说明
v-model	boolean	Checked state (standalone mode) / 选中状态（独立模式）

Slots / 插槽

Slot	Description / 说明
default	Custom label content (overrides label prop) / 自定义标签内容

Basic Usage / 基础用法

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

const agreed = ref(false)
const newsletter = ref(true)
</script>

<template>
  <TCheckbox v-model="agreed">I agree to the terms / 同意条款</TCheckbox>
  <TCheckbox v-model="newsletter" label="Subscribe to newsletter / 订阅 newsletter" />
  <TCheckbox v-model="option" disabled>Disabled / 禁用的选项</TCheckbox>
</template>

Advanced Usage / 进阶场景

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

const selected = ref(['vue', 'react'])
const options = [
  { label: 'Vue.js', value: 'vue' },
  { label: 'React', value: 'react' },
  { label: 'Angular', value: 'angular', disabled: true },
]
</script>

<template>
  <!-- Checkbox group / 复选框组 -->
  <TCheckboxGroup v-model="selected">
    <TCheckbox v-for="opt in options" :key="opt.value" :value="opt.value" :disabled="opt.disabled">
      {{ opt.label }}
    </TCheckbox>
  </TCheckboxGroup>
  Selected: {{ selected }}

  <!-- Inline layout / 内联排列 -->
  <TCheckboxGroup v-model="selected" inline>
    <TCheckbox v-for="opt in options" :key="opt.value" :value="opt.value">
      {{ opt.label }}
    </TCheckbox>
  </TCheckboxGroup>

  <!-- Indeterminate state / 半选状态 -->
  <TCheckbox v-model="allChecked" :indeterminate="someChecked">
    Select All / 全选
  </TCheckbox>

  <!-- Validation / 验证 -->
  <TCheckbox v-model="agreed" validation="invalid" required>
    I agree (required) / 我同意（必选）
  </TCheckbox>
</template>

Tips / 避坑指南

• In group mode, v-model binds to an array on TCheckboxGroup, NOT on individual TCheckbox components
• In standalone mode, v-model binds to a boolean on TCheckbox
• indeterminate is visual-only — it does not affect the v-model value. Manage the "Select All" logic yourself
• disabled on individual TCheckbox overrides group-level disabled
• The component auto-generates a unique id for each checkbox's <label for="..."> association