This is a stripped-down version of a single section of Grok TiddlyWiki, optimized for fast loading and readability by search engines. Some features are missing.

For the full Grok TiddlyWiki experience, please visit the wiki version of this page.

Miscellaneous Widgets

2nd May 2021 at 11:03am

A handful of widgets are frequently useful but haven't been needed in this book thus far. Here is a quick introduction to each of them. For a full listing of all widgets, visit the appropriate page of the TiddlyWiki documentation.


This is a shorter way of writing multiple $set widgets:

<$set name="var1" value="one">
<$set name="var2" value="two">
    <<var1>> <<var2>>

<$vars var1="one" var2="two">
    <<var1>> <<var2>>

one two

one two

Be aware that a few limitations come with this method:

  • The name of each variable must be literal, not a transclusion. That is, you can't say <$vars <<myname>>=<<myvalue>>>, while you can say <$set name=<<myname>> value=<<myvalue>>>.
  • Later variables listed in the $vars widget can't refer to earlier ones; none of the variables are defined until the content of the $vars widget begins. That is, <$vars var1="one" var2=<<var1>>> sets var2 to nothing.
  • You can't use an emptyMessage or a filter with $vars, as Hiding and Showing Things explains you can do with $set.

This said, $vars often comes in handy for simple use cases.


This is a shorter way of displaying the number of tiddlers that match a filter.

There are <$text text={{{ [all[tiddlers+shadows]tag[Section]count[]] }}}/> sections in this book.

There are <$count filter="[all[tiddlers+shadows]tag[Section]]"/> sections in this book.

There are 88 sections in this book.

There are 88 sections in this book.


This is a friendly way of setting the current tiddler. In addition, it does a little more than just setting the currentTiddler variable would, by setting some variables to CSS classes appropriate to the new current tiddler. This is more esoterica than anything else, but on occasion having access to these might be important or useful.

<$set name="currentTiddler" value="New Current Tiddler">

<$tiddler tiddler="New Current Tiddler">

New Current Tiddler

New Current Tiddler


This allows you to create a radio button. Radio buttons work much like the $edit-text widget and the $checkbox widget. You use them by listing several values the user can choose from in separate $radio widgets, and TiddlyWiki will decide which one to show as selected based on the value of the bound field.

The tiddler attribute defaults to the current tiddler, and the field attribute to text, but either can be set to something else if desired. Below, we bind our radio buttons to the text field of a temporary tiddler.

What do you want to look at?

<$radio tiddler="$:/temp/RadioExample" value="Exercise">&nbsp;Exercises</$radio>&ensp;
<$radio tiddler="$:/temp/RadioExample" value="Section">&nbsp;Sections</$radio>&ensp;
<$radio tiddler="$:/temp/RadioExample" value="Takeaway">&nbsp;Takeaways</$radio>

<<list-links "[all[tiddlers+shadows]tag{$:/temp/RadioExample}first[5]]">>

What do you want to look at?

    Note the use of &nbsp; and &ensp; to handle spacing. These are called HTML entities, a way of writing characters that don't have keys on the keyboard or have special meaning in HTML. The former is a non-breaking space (the same width as a normal space, but the browser will prefer not to put a line break there, unless there is no other way to make the line fit on the screen), and the latter is an en space (longer than a normal space, the width of a lowercase n). A more flexible way to handle the spacing between the buttons would be using CSS rules, but spaces are often good enough.


    When you have more than a couple choices, you may wish to present them as a drop-down menu rather than as radio buttons. Let's rewrite the radio-buttons example to use a drop-down instead:

    What do you want to look at?
    <$select tiddler="$:/temp/SelectExample" default="">
        <option value="">(choose an option)</option>
        <option value="Exercise">Exercises</option>
        <option value="Section">Sections</option>
        <option value="Takeaway">Takeaways</option>
    <<list-links "[all[tiddlers+shadows]tag{$:/temp/SelectExample}first[5]]">>

    What do you want to look at?

      Sometimes you might want to populate the drop-down menu dynamically, rather than listing out a number of options. This is easy to do with a $list widget:

      <$select tiddler="$:/temp/SectionSelectorExample" default="">
          <option value="">(choose a section)</option>
          <$list filter="[all[tiddlers+shadows]tag[Section]]">
              <option value=<<currentTiddler>>>
      <$list filter="[{$:/temp/SectionSelectorExample}!is[blank]]" variable="selectedTiddler" emptyMessage="Please choose a section.">
          The blurb of the section //<<selectedTiddler>>// is “<$transclude tiddler=<<selectedTiddler>> field="description"/>”


      Please choose a section.

      You can do something similar for radio buttons if you like, but it's more typical to use a drop-down when you aren't sure in advance what items will be in the list – if at some point in the future there are unexpectedly 200 items rendering as radio buttons, your tiddler might be pretty hard to use!


      Exercise: (m) [Ex:SetVarsReplacement]

      Locate several places in your sample wiki where you have used $set widgets and replace them with equivalent $vars widgets.

      Exercise: (m) [Ex:CountWidgetReplacement]

      Go to the WikiStatistics tiddler, originally created in the exercise Ex:WikiStatistics, and replace any numbers that you can with an appropriate $count widget.

      go to answer

      Exercise: (m) [Ex:FamilyRadioButton]

      Add a series of radio buttons on the ContactInformationTemplate that allow you to view some information about each family member of the current tiddler.

      go to answer

      Exercise: (m) [Ex:ContactCard]

      Create a tiddler called ContactCard that displays a drop-down menu from which you can select any contact in the wiki. Underneath the drop-down menu, the selected contact is transcluded through the ContactInformationTemplate, showing the contact's details.

      go to answer


      Takeaways are not available in the static version of Grok TiddlyWiki. Visit the wiki version of this page to study takeaways.

      ↑ 7: Tips and Tricks