Checkbox

Checkbox allows users to toggle between two states. Supports standalone use, grouped mode, and more.

Basic Usage

Two-way binding via v-model.

Show Code

<TCheckbox label="Default checkbox"/>
<TCheckbox v-model="agreed" label="Checked"/>
<TCheckbox label="Disabled" disabled/>
<TCheckbox label="Disabled (checked)" disabled model-value="true"/>

Inline Layout

Use the inline prop to arrange checkboxes horizontally.

Show Code

<TCheckbox inline label="Option A"/>
<TCheckbox inline label="Option B"/>

TCheckboxGroup Mode (Recommended)

Wrap multiple TCheckbox components inside TCheckboxGroup. The v-model automatically manages the array of selected values. Props like name, inline, disabled, and validation can be set once on the group and applied to all children.

Show Code

<TCheckboxGroup v-model="checkedArr">
  <TCheckbox value="apple" label="Apple" />
  <TCheckbox value="banana" label="Banana" />
  <TCheckbox value="orange" label="Orange" />
</TCheckboxGroup>

options Mode (Array Generation)

Pass a string array or object array via the options prop to auto-generate TCheckbox components — no need to write child components manually.

String array: each string serves as both label and value.
Object array: you can specify label, value, and disabled.
Custom rendering: use the #option slot to customize each option's label content.

Show Code

<!-- String array -->
<TCheckboxGroup v-model="checkedArr" :options="['Apple', 'Pear', 'Orange']" />

<!-- Object array -->
<TCheckboxGroup v-model="checkedArr" :options="[
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
]" />

<!-- With disabled options -->
<TCheckboxGroup v-model="checkedArr" disabled :options="[
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana', disabled: true },
]" />

Indeterminate State

Use the indeterminate prop to show a mixed (half-checked) state. Typical scenario: tree views or select-all/deselect-all lists where some (but not all) child items are checked.

Note: indeterminate is a visual-only state — it does not affect the v-model value.

Show Code

<TCheckbox indeterminate label="Indeterminate state"/>

Validation States

Use the validation prop to set validation state. Pair with .valid-feedback / .invalid-feedback for messages.

Show Code

<TCheckbox label="Valid state" validation="valid"/>
<div class="valid-feedback">Looks good!</div>

<TCheckbox label="Invalid state" validation="invalid"/>
<div class="invalid-feedback">Please check this option.</div>

Custom Label (Slot)

Use the default slot to customize the label content — supports rich text and icons.

Show Code

<TCheckbox>
  <span>I agree to the <span class="text-danger">Terms of Service</span></span>
</TCheckbox>

API

TCheckbox Props

Prop	Description	Type	Default
v-model	Binding value (standalone: boolean, group mode: auto-managed)	boolean	false
value	Option identifier in group mode	any	undefined
label	Label text	string	undefined
inline	Inline layout	boolean	false
disabled	Disabled state	boolean	false
indeterminate	Indeterminate (visual only)	boolean	false
validation	Validation state	'valid' | 'invalid'	undefined
id	Native id attribute	string	undefined
name	Native name attribute	string	undefined
required	Whether required	boolean	false

TCheckbox Emits

Event	Description	Callback
update:modelValue	Triggered on value change (standalone mode)	(value: boolean) => void

TCheckboxGroup Props

Prop	Description	Type	Default
v-model	Array of selected values	any[]	[]
options	Option array (string or object), auto-generates TCheckbox children	(string | { label: string, value?: any, disabled?: boolean })[]	undefined
name	Group name (auto-applied to child TCheckbox)	string	undefined
inline	Inline layout (auto-applied to children)	boolean	false
disabled	Disable all children	boolean	false
validation	Validation state (auto-applied to children)	'valid' | 'invalid'	undefined

TCheckboxGroup Emits

Event	Description	Callback
update:modelValue	Triggered when selected values change	(value: any[]) => void
change	Triggered when selected values change	(value: any[]) => void

TCheckbox Slots

Slot	Description
default	Custom label content (replaces label prop)

TCheckboxGroup Slots

Slot	Description	Scope
default	Custom child items (when options is not set)	—
option	Custom option label (when options is set)	{ option: { label, value, disabled }, checked: boolean }