This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

RadioWidget

30th November 2020 at 6:43pm
Widgets

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.

AttributeDescription
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
classThe CSS classes assigned to the label around the radio button New in: 5.1.14 tc-radio is always applied by default, as well as tc-radio-selected when selected
actions New in: 5.1.23 Optional string containing ActionWidgets to be triggered when the value changes.
The variable: actionValue is available for the actions
disabled New in: 5.1.23 Optional. Set to "yes" to disable the radio input. Defaults to "no"

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 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}}/>