Checkbox | Tuff Docs

Usage

Basic

Click the box or its label to toggle.

Loading demo...

Variants

The default checkmark draws a tick; variant="fill" only fills the box.

Loading demo...

Disabled

Loading demo...

Label First

labelPlacement="start" puts the label before the box.

Loading demo...

No Label

Without a label or slot, pass aria-label.

Loading demo...

Loading

Set loading while a server confirms the change. The box becomes a ring, grey when unchecked and primary when checked or mixed, and toggling is blocked.

Loading demo...

Custom Label

The default slot replaces label.

Loading demo...

Best Practices

Prefer a visible label or slot; use ariaLabel only when there is no visible text.
Use loading for "committing" and disabled for "unavailable"; a busy control shown as disabled looks permanently inert.
When the server must confirm, set loading and write modelValue only on success. On failure, just clear loading.

API Reference

Props

Prop	Type	Default	Description
`modelValue` / `v-model`	`boolean`	`false`	The checked state.
`disabled`	`boolean`	`false`	Blocks toggling and removes the box from the tab order.
`loading`	`boolean`	`false`	Shows a spinning ring and blocks toggling, without the disabled palette.
`label`	`string`	-	Text beside the box.
`labelPlacement`	`'start' \| 'end'`	`'end'`	Puts the label before or after the box.
`variant`	`'checkmark' \| 'fill'`	`'checkmark'`	`checkmark` draws a tick; `fill` only fills the box.
`ariaLabel`	`string`	-	Accessible name when there is no visible text.
`indeterminate`	`boolean`	`false`	Partial selection: shows a dash, and a click resolves to checked.

Events

Event	Params	Description
`update:modelValue`	`(value: boolean) => void`	Fires after a user toggle with the new value.
`change`	`(value: boolean) => void`	Fires together with `update:modelValue`.

Slots

Slot	Description
`default`	Custom label content; overrides `label`.

Overview

The root is a native <button role="checkbox">; click, Enter, or Space toggles it.
It is controlled: a toggle only emits, and the box updates once the parent writes modelValue back.
indeterminate sets aria-checked="mixed", which is what tells checked from mixed while loading, since both look the same.
disabled and loading both set the native disabled attribute; loading also sets aria-busy="true".
With visible text, no aria-label is rendered.
Under reduced motion, the loading ring stops spinning.

Technologies

index.ts exports both TuffCheckbox and TxCheckbox.
Source: packages/tuffex/packages/components/src/checkbox/.

查看源码

packages/tuffex/packages/components/src/checkbox/index.ts