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.
| Attribute | Description |
|---|---|
tiddler | Title of the tiddler to manipulate (defaults to the Current Tiddler) |
| The name of the tag to which the checkbox is bound | |
invertTag | When 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 | |
checked | The value of the field corresponding to the checkbox being checked |
unchecked | The value of the field corresponding to the checkbox being unchecked |
default | The default value to use if the field is not defined |
| Whether ambiguous values can produce indeterminate checkboxes (see below) | |
class | The class that will be assigned to the <label> element |
actions | Introduced in v5.1.14 A string containing ActionWidgets to be triggered when the status of the checkbox changes (whether it is checked or unchecked) |
uncheckactions | Introduced in v5.1.16 A string containing ActionWidgets to be triggered when the checkbox is unchecked |
checkactions | Introduced in v5.1.20 A string containing ActionWidgets to be triggered when the checkbox is checked |
disabled | Introduced in v5.1.23 Optionally disables the checkbox if set to yes (defaults to no) |
tabindex | New in v5.3.7 Optional. Sets the tabindex attribute of the HTML select element to the given value |
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: