Checkbox

TxCheckbox is a compact boolean control for settings, filters, and form rows. It exposes checkbox ARIA state, supports click/Enter/Space toggling, and only uses aria-label when no visible label or default slot is present.

import { ref } from 'vue' const checked1 = ref(false) const checked2 = ref(true) const checked3 = ref(false) const checked4 = ref(true) const checked5 = ref(false)

Basic Usage

Checkbox

Demo will load when visible.

<template>
  <TxCheckbox v-model="checked" label="Option" />
</template>

Label First (labelPlacement = start)

Checkbox (label start)

Demo will load when visible.

<template>
  <TxCheckbox v-model="checked" label="Text" label-placement="start" />
</template>

No Label

When there is no label/slot, pass aria-label.

Checkbox (no label)

Demo will load when visible.

<template>
  <TxCheckbox v-model="checked" aria-label="Text" />
</template>

Disabled State

Checkbox (disabled)

Demo will load when visible.

<template>
  <TxCheckbox v-model="checked" label="Disabled" disabled />
</template>

Using Slots

Checkbox (slot)

Demo will load when visible.

<template>
  <TxCheckbox v-model="checked">
    <span>CustomText</span>
  </TxCheckbox>
</template>

API

Props

Prop	Description	Type	Default
modelValue / v-model	Checked state. Updates through click, Enter, or Space when enabled.	`boolean`	`false`
disabled	Disables focus and prevents click or keyboard toggles.	`boolean`	`false`
label	Visible text label rendered next to the checkbox.	`string`	-
labelPlacement	Places the visible label before or after the checkbox box.	`'start' \| 'end'`	`'end'`
ariaLabel	Accessible label used only when neither `label` nor the default slot is visible.	`string`	-

Events

Event	Description	Params
change	Emitted with the next checked state after an enabled toggle.	`(value: boolean) => void`
update:modelValue	v-model update emitted with the next checked state after an enabled toggle.	`(value: boolean) => void`

Slots

Column	Description
default	Replaces `label` with custom visible label content.