Template:Calculator codex radio/doc
This is a documentation subpage for Template:Calculator codex radio. It may contain usage information, categories and other content that is not part of the original template page. |
Usage
[edit]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
[edit]{{Calculator codex radio|id=myradio|name=group1|label=First option|description=Additional text describing the first option}}
produces:
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=Thid option}} </div>
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>
Template data
[edit]Add a radio button for calculator gadget in codex style
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
| 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
| Content | optional |