Template:Calculator codex radio

Template documentation[view] [edit] [history] [purge]

Usage

This is to create a codex-style radio {{calculator}} widget. A radio button is used when there is multiple options and the user should only be able to select one.

Please see https://doc.wikimedia.org/codex/latest/components/demos/radio.html#guidelines for best practices.

Example

{{Calculator codex radio|id=myradio|name=group1|label=First option|description=Additional text describing the first option}}

produces:

First optionAdditional text describing the first option

Generally radio buttons form a group. In order for best accessibility, the group of radio buttons should be collected into a div with role="radiogroup". The group should have its own label referenced by aria-labelledby. For example:

<div role="radiogroup" aria-labelledby="mygrouplabel" id="myradiogroup">
{{calculator label|codex=1|for=myradiogroup|label=This is a group of options|id=mygrouplabel}}
{{Calculator codex radio|id=myradio1|name=group2|label=First option|description=Additional text describing the first option}}
{{Calculator codex radio|id=myradio2|name=group2|label=Second option|description=Additional text describing the first option}}
{{Calculator codex radio|id=myradio3|name=group2|label=Thid option}}
</div>

This is a group of options

First optionAdditional text describing the first option

Second optionAdditional text describing the first option

Thid option

You can also have options inline:

<div role="radiogroup" aria-labelledby="mygrouplabel2" id="myradiogroup2">
{{calculator label|codex=1|for=myradiogroup2|label=A bunch of inline options|id=mygrouplabel2}}
{{Calculator codex radio|id=myradioin3|name=group3|label=First|inline=1}}
{{Calculator codex radio|id=myradioin2|name=group3|label=Second|inline=1}}
{{Calculator codex radio|id=myradioin1|name=group3|label=Third|inline=1}}
</div>

A bunch of inline options

First

Second

Third

Template data

Add a radio button for calculator gadget in codex style

Template parameters[Edit template data]

Parameter		Description	Type	Status
codex-div-class	codex-div-class	additional css classes for outer wrapper	String	optional
id	id	id value of calculator widget. Can be referenced by other calculator templates	Unknown	required
name	name	Name of radio group. All radio buttons in the same group should have the same name	String	required
style	style	CSS to style the radio button widget	String	optional
formula	formula	Formula to control if button is on or off.	Unknown	optional
readonly	readonly	Make button read only. Read only buttons can be adjusted by formula but not by user interaction	Boolean	optional
class-live	class-live	extra css classes to add only if gadget is enabled	Unknown	optional
class	class	extra css class	String	optional
default	default	Whether to start in a checked or unchecked state Suggested values 1 0	String	optional
description	description	Additional description to add after the label	Content	optional
label	label	Label for radio button	Unknown	required
inline	inline	Make radio buttons be inline (Multiple on one line) instead of being a separate line for each	Boolean	optional
custominput	custominput	Add another calculator widget as part of the label for a radio button Example {{calculator codex text|default=42|id=foo}}	Content	optional

The above documentation is transcluded from Template:Calculator codex radio/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Add categories to the /doc subpage. Subpages of this template.