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

RadioWidget

 13th November 2023 at 9:33am

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
indexIntroduced in v5.1.14 The index of the tiddler being DataTiddler bound to the radio button (takes precedence over field)
defaultIntroduced in v5.2.0 The default value to be used for matching if the tiddler, field or index are missing
valueThe value for the field or index of the tiddler
classThe 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
actionsIntroduced in v5.1.23 Optional string containing ActionWidgets to be triggered when the value changes.
The variable: actionValue is available for the actions
disabledIntroduced 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 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}}/>