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.

Buttons and Input Widgets

soren18th August 2021 at 2:07pm

So far, all we've done to customize TiddlyWiki is make new, more or less static content of various kinds show up in various places in the wiki: macros, tiddler content, sidebar tabs, snippets. This is all well and good, but sometimes we want to add interface elements the user can actively interact with as well. In other words, we want to be able to build the machine tiddlers we discussed in Slicing Up Content.

The most basic tools for active interaction are buttons and text boxes that the user can click on and type into to perform simple tasks. Let's look at how these work.

Setting a value

Perhaps the most common thing to do with a button is set the value of some field of a tiddler. Buttons are created, perhaps unsurprisingly, using the $button widget. Within a $button widget, we can use the set and setTo attributes of the widget to set a field to a value. set refers to a field using the same syntax as a transclusion, but without the curly braces (the formal name for this is a text reference). setTo is the value the specified field will be set to.

For example, we can set the current tiddler's userwhoclicked field to Soren with this button:

<$button set="!!userwhoclicked" setTo="Soren">
  Big Red Button

User who clicked: "{{!!userwhoclicked}}"

User who clicked: ""

When I click on this button, the tiddler now contains a field recording that I clicked the button.

Of course, this won't be right if you click the button (unless by chance your name is also Soren). The $:/status/UserName tiddler contains the username TiddlyWiki uses to sign any tiddlers you edit, if you have this function on, so we could make it use that value instead:

<$button set="!!userwhoclicked" setTo={{$:/status/UserName}}>
  Big Red Button, Version 2

Getting the value from user input

What if we want to allow the user to enter their own name? We can do this by pairing the button with an $edit-text widget.

<$edit-text tiddler="$:/temp/EditingUserName" tag="input" default=""/>
<$button set="!!userwhoclicked" setTo={{$:/temp/EditingUserName}}>Save User Who Clicked</$button>

The `userwhoclicked` field is set to "{{!!userwhoclicked}}".

The userwhoclicked field is set to "".

You'll notice that the $edit-text widget is associated with a field of a specific tiddler (here, since we haven't explicitly named the field, it's the text field of the $:/temp/EditingUserName tiddler). In fact, as the user changes the contents of the text box, that field is being directly edited, and if the contents of the field change for some other reason, the text box will immediately update to match. We say that the text box is bound to the field.

The tiddler holds the text the user has entered until the user clicks the button, at which point the button will retrieve the contents and do something with them. This is a common pattern in TiddlyWiki – even core UI elements like the search box store their current contents in a tiddler. Because of the ubiquity of tiddlers used to store the state of the user interface and configuration values, buttons can do more than they would appear to at first glance by setting values!

The tiddler we've bound the text box to in this case is a system tiddler whose name begins with $:/temp/, often called a temporary tiddler. Tiddlers in $:/temp/ are not saved with your wiki – when you close the page or hit the refresh button, they are all gone. For a situation like this one, that's usually what you want, but if you want the value to persist across a reload, you should keep that tiddler somewhere else.

The attribute tag="input" used above is usually going to be what you want. If you leave it off, you get a multiple-line text area, which could be helpful for entering text into the text field of some tiddler, but not much else.


Sometimes you might want a button to look like a link rather than a button. Buttons can be styled using CSS, just like anything else in the wiki, and TiddlyWiki provides some special CSS classes for exactly this use case. To create such a “button,” add the attribute class="tc-btn-invisible tc-tiddlylink" to your button widget.


As we continue to move forward learning about more widgets like these, the definitive reference source is always A quick search there will get you details about widgets, field operators, terms, and so on. Looking at the documentation frequently is normal, even for experts who use spaced repetition to study TiddlyWiki. There are just too many options to remember them all!

You now know enough about TiddlyWiki to use the official documentation effectively and should start doing it whenever it would be helpful. From here on out, we will no longer link to the pages as they come up or include details about how to look in the documentation for information you need to know for an exercise.

Exercise: (m) [Ex:MainSearchBoxBinding]

Figure out what tiddler and field the main search box in the sidebar is bound to.

go to answer

Exercise: (m) [Ex:EditCurrentTiddler]

The $edit-text widget can edit any field on any tiddler, so we don't have to use a temporary tiddler if we don't want to. In the example above, we could just update the userwhoclicked field directly as the user types.

Look up the documentation for the $edit-text widget to learn how to select which field the widget should edit, then change the example to behave accordingly.

go to answer

Exercise: (m) [Ex:JumpToTiddler]

Create a tiddler JumpToTiddler that has an input field and a Go button. When the button is clicked, the tiddler named in the input field should open.

Hint: One of the attributes of the button widget we didn't discuss here will help.

go to answer

Exercise: (m) [Ex:InputExistsText]

Add a little bit of text to the right of the Go button in Ex:JumpToTiddler that displays "Exists!" in green if the tiddler name currently entered into the input field exists, and "Not found." in red if it doesn't. This text should immediately update as you type.

Hint: To quickly change the color of some text, you can wrap it with a span, like <span style="color:blue;">the text</span>.

go to answer

Exercise: (m) [Ex:CaptionsByTag]

Create a tiddler called CaptionsByTag. This tiddler should contain an input widget into which the user types the name of a tag. A table underneath the input widget should show all of the tiddlers with this tag along with their captions, if any. That would look something like this:

FudgeAtTheOfficeThe Great Fudge Warning

Note: You'll have to use raw HTML tables to get this to display correctly – wikitext tables don't work if you interrupt them with a list widget. An HTML table has this basic form:

    <th>Header 1</th>
    <th>Header 2</th>
    <td>Cell 1</td>
    <td>Cell 2</td>

Header 1 Header 2
Cell 1 Cell 2

The equivalent wikitext table would be:

|!Header 1|!Header 2|
|Cell 1|Cell 2|

Header 1Header 2
Cell 1Cell 2

tr stands for table row, th for table header, and td for table data.

go to answer


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

↑ 6: Looking Under the Hood