This page is part of a static HTML representation of the TiddlyWiki at


17th December 2016 at 11:24am


The radio widget displays an HTML <input type="radio"> that reflects whether a given tiddler field has a specified value. Selecting the radio button sets to the tiddler field to the value.

Content and Attributes

The content of the <$radio> widget is displayed within an HTML <label> element also containing the radio button. This means that clicking on the content will have the same effect as clicking on the button itself.

tiddlerTitle of the tiddler to manipulate (defaults to the current tiddler)
fieldThe field of the tiddler bound to the radio button
index New in 5.1.14 The index of the tiddler being DataTiddler bound to the radio button
takes precedence over field
valueThe value for the field or index of the tiddler
classCSS classes to be assigned to the label around the radio button

Field Mode

This example uses the radio widget to change the modifier field of this tiddler:

<$radio field="modifier" value="JoeBloggs"> Joe Bloggs</$radio>
<$radio field="modifier" value="JaneBloggs"> Jane Bloggs</$radio>

That renders as:

Index Mode

Using the radio widget in index mode requires the index attribute to specify the name of the index of a DataTiddler to which the specified value is assigned.

This example sets the Tree Frog index in the tiddler AnimalColours:

<$tiddler tiddler="AnimalColours">
<$radio index="Tree Frog" value="green"> green</$radio>
<$radio index="Tree Frog" value="brown"> brown</$radio>

That renders as: