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 all with the same name should be collected into a div with role="radiogroup". If you want to group related radio controls together consisting of multiple radio groups, use role=group for that. 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|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=Third option}}
</div>

This is a group of options

First optionAdditional text describing the first option

Second optionAdditional text describing the first option

Third option

You can also have options inline:

<div role="radiogroup" aria-labelledby="mygrouplabel2" id="myradiogroup2">
{{calculator label|codex=1|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.
Editors can experiment in this template's sandbox and testcases pages.
Add categories to the /doc subpage. Subpages of this template.