This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

CheckboxWidget

 13th November 2023 at 9:33am

Introduction

The checkbox widget displays an HTML <input type="checkbox"> element that is dynamically bound to either:

  • the presence or absence of a specified tag on a specified tiddler
  • the value of a specified field of a specified tiddler

Content and Attributes

The content of the <$checkbox> widget is displayed within an HTML <label> element immediately after the checkbox itself. This means that clicking on the content will toggle the checkbox.

AttributeDescription
tiddlerTitle of the tiddler to manipulate (defaults to the Current Tiddler)
The name of the tag to which the checkbox is bound
invertTagWhen set to yes, flips the tag binding logic so that the absence of the tag causes the checkbox to be checked
The name of the field to which the checkbox is bound
Introduced in v5.2.3 The name of the field that contains the list to which the checkbox is bound
Introduced in v5.1.14 The property of the DataTiddler to which the checkbox is bound
Introduced in v5.2.3 Like index, but treats the value as a list the same way that listField does
Introduced in v5.2.3 A filter whose output determines the checked state of the checkbox
checkedThe value of the field corresponding to the checkbox being checked
uncheckedThe value of the field corresponding to the checkbox being unchecked
defaultThe default value to use if the field is not defined
Whether ambiguous values can produce indeterminate checkboxes (see below)
classThe class that will be assigned to the <label> element
Tip
Introduced in v5.2.3 tc-checkbox is always applied by default, as well as tc-checkbox-checked when checked
actionsIntroduced in v5.1.14 A string containing ActionWidgets to be triggered when the status of the checkbox changes (whether it is checked or unchecked)
uncheckactionsIntroduced in v5.1.16 A string containing ActionWidgets to be triggered when the checkbox is unchecked
checkactionsIntroduced in v5.1.20 A string containing ActionWidgets to be triggered when the checkbox is checked
disabledIntroduced in v5.1.23 Optionally disables the checkbox if set to yes (defaults to no)
data-*New in v5.3.2 Optional data attributes to be assigned to the HTML <input> element
style.*New in v5.3.2 Optional CSS properties to be assigned to the HTML <input> element

tag Mode

Using the checkbox widget in tag mode requires the tag attribute to specify the name of the tag. The checkbox will be checked if the tiddler specified in the tiddler attribute has the specified tag and unchecked if it does not.

This example creates a checkbox that flips the done tag on the current tiddler:

<$checkbox tag="done"> Is it done?</$checkbox>

That renders as:

When the attribute invertTag is set to yes, the checkbox will be checked if the tiddler does not have the specified tag and unchecked if it does.

<$checkbox tag="done" invertTag="yes"> Is it not done?</$checkbox>

That renders as: