Introduction
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.
| 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 | Introduced in v5.1.14 The index of the tiddler being DataTiddler bound to the radio button (takes precedence over field) |
| default | Introduced in v5.2.0 The default value to be used for matching if the tiddler, field or index are missing |
| value | The value for the field or index of the tiddler |
| class | The CSS classes assigned to the label around the radio button Introduced in v5.1.14 tc-radio is always applied by default, as well as tc-radio-selected when selected |
| actions | Introduced in v5.1.23 Optional string containing ActionWidgets to be triggered when the value changes. The variable: actionValue is available for the actions |
| disabled | Introduced in v5.1.23 Optional. Set to "yes" to disable the radio input. Defaults to "no" |
| data-* | New in v5.3.2 Optional data attributes to be assigned to the <input> HTML element |
| style.* | New in v5.3.2 Optional CSS properties to be assigned to the <input> HTML element |
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>
</$tiddler>That renders as:
Using Actions
When you select an option below the following acitons will occur:
- the value is written to $:/temp/test/value
- the id field of tiddler: $:/temp/test will be updated
- a notification showing the actionValue will be shown
The wikitext of this example is shown below:
\define newText() value: $(actionValue)$
\define radioActions()
<$action-sendmessage $message="tm-notify" $param="RadioWidget ExampleTemplate" value=<<actionValue>> current=<<currentTiddler>> />
<$action-createtiddler $basetitle="$:/temp/test/value" $overwrite="yes" text=<<newText>>/>
<$action-navigate $to="$:/temp/test/value"/>
\end
!! Using Actions
When you select an option below the following acitons will occur:
* the value is written to $:/temp/test/value
* the ''id'' field of tiddler: $:/temp/test will be updated
* a notification showing the ''actionValue'' will be shown
<$tiddler tiddler="$:/temp/test">
<$radio field="id" value="a" actions=<<radioActions>> > Option a </$radio>
<$radio field="id" value="b" actions=<<radioActions>> > Option b </$radio>
<$radio field="id" value="c" actions=<<radioActions>> > Option c </$radio>
</$tiddler>
The wikitext of this example is shown below:
<$codeblock code={{RadioWidget Example!!text}}/>