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.
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.
| Attribute | Description |
|---|---|
| tiddler | Title of the tiddler to manipulate (defaults to the current tiddler) |
| field | The 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 |
| value | The value for the field or index of the tiddler |
| class | The CSS classes assigned to the label around the radio button |
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:
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>
</$tiddler>That renders as: